在这种情况下如何转化、翻译

How to transform, translate in this situation?

本文关键字:翻译 何转化 这种情况下      更新时间:2023-09-26

我想移动div.willshow时,var约点击。但是我点击btn,它得到了类active。我再点一下btn它就失去了类。如果我再点击一次,每个任务都不工作。

CSS

div.willshow {
    width:calc(100% - 52px);
    height:100%;
    margin-left: 52px;
    z-index:100;
    background-color: white;
    position: absolute;
    left:-100%;
    -ms-transition: -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: -webkit-transform 0.5s ease-in-out;
}
div.willshow.active {
    -ms-transform: translate(-100%, 0); /* IE 9 */
    -webkit-transform: translate(-100%, 0); /* Safari */
    transform: translate(-100%, 0);
}
Javascript

var about = $('ul.about > li > span');
var willshow = $('div.willshow');
about.click(function(){
    willshow.addClass('active');
    about.html('close');
    about.click(function(){
        willshow.removeClass('active');
        about.html('about');
    });
});

使用单个点击事件,在html函数中使用if来切换文本:

about.on('click',function(){
    willshow.toggleClass('active');
    about.html(function(){
       if($(willshow).hasClass('active')) {
          return 'close';
       }
       return 'about';
    });
});

演示:https://jsfiddle.net/ztw7uxhy/1/

我认为你的脚本会更好地工作,使这样的东西

var about = $('ul.about > li > span');
var willshow = $('div.willshow');
var active;
about.click(function(){
if (active!='yes'){
    willshow.addClass('active');
    about.html('close');
    active='yes';
else{
    willshow.removeClass('active');
    about.html('about');
    active='no';
});

about点击处理程序中,您可以使用jQuery#toggleclass()来设置willshow类,然后使用条件(三元)操作符,您可以以干净的方式获得适当的about类:

var about = $('ul.about > li > span'),
    willshow = $('div.willshow');
about.click(function () {
    willshow.toggleClass('active');
    about.html(willshow.hasClass('active') ? 'close' : 'about');
});