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();
        }
    }
}

Answer 2

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


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

 $(document).click(function(event) {
 var target= event.target;

 //if they click anything but .div1, and .div1 is not expanded expand it.

 if(!$(target).hasClass('.div1') &&  !$('.div1').hasClass('active'))
      Trigger();

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

2 个答案: