javascript - 添加if条件后，切换按钮停止工作

Question

演示: http://jsbin.com/labuxuziraya/1/edit

添加if条件后，按钮停止工作。 我确信这里有一些小错误，但我没有足够的经验来发现它。

谢谢。

HTML

<div class="div1 active">press outside the div to expand again</div>
<span class="btn btn-default">toggle to expand<span>

CSS

div {
background: lightgrey;
width: 200px;
height: 400px;
float: left;
padding: 15px;
margin: 15px;
}

.active {
   width: 50px;
 }

JS

function Trigger() {
 $('.div1').toggleClass('active');
 }


 $('.btn').on('click',function(){
   Trigger();
});


 $(document).click(function(event) { 
 if(!$(event.target).closest('.div1').length)
 {
     if( $('.div1').hasClass('active') )
    {Trigger();}        
  });

Answer 1

如果我理解正确并且正如 Lal/LinkinTED 评论的那样，我认为您可以删除 if( $('.div1').hasClass('active') ) 条件，因为它是在 toggleClass 函数中处理的。 因此，您最简单的解决方法是:

$(document).click(function(event) { 
    if (!$(event.target).closest('.div1').length) {
        $('.div1').toggleClass('active');
    }        
});

如果你坚持你的条件，那么你基本上是在重新发明轮子(切换功能)，你需要创建 activate/deactivate 函数来调用你的 if/else :

function activate() {
     $('.div1').addClass("active");
}

function deactivate() {
     $('.div1').removeClass("active");
}

$(document).click(function(event) {
    if(!$(event.target).closest('.div1').length) {
        if ( $('.div1').hasClass('active') ) {
            deactivate();
        }
        else {
            activate();
        }
    }
}