javascript - 在这种情况下如何转换、翻译？

Question

我想在点击 var about 时移动 div.willshow。但我单击那个 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');
    });
});

Answer 1

使用单击事件，在 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/