在div外部单击jQuery会将其动画显示为关闭的作品，但必须单击两次才能打开

Question

我在这里设置了一个开发页面：http://dev.harryg.me/da/

在旁边，我有3个div，应该动画打开时，点击和动画关闭时，再次点击标题。

我想添加这个功能，这样当用户单击文档上的其他位置时，所有div都将关闭。这几乎工作得很好，除了一旦一个div由于在外部单击而被打开和关闭，用户必须在它上单击两次才能重新打开它。

知道原因了吗？

这是我的jQuery..。

jQuery(function($) {
    $('h2.tab-title').toggle(function() {
        $(this).parent().animate({left:'0px'}, {queue:false, duration: 500});
    }, function() {
        $(this).parent().animate({left:'-338px'}, {queue:false, duration: 500});
    });

});
jQuery(".side-tab").click(function(){ return false; });
jQuery(document).bind("click", function() { jQuery(".side-tab").animate({left:'-338px'}, {queue:false, duration: 500}); });

Answer 1

创建一个打开和关闭事件，并在随后的单击时触发一个或另一个事件，在文档单击时触发关闭。

<div><h2 class="tab-title">h2</h2></div>
<div><h2 class="tab-title">h2</h2></div>
<div><h2 class="tab-title">h2</h2></div>
<div><h2 class="tab-title">h2</h2></div>

JS

$('h2.tab-title').on('open', function() {
    $(this).parent().animate({left:'0px'}, {queue:false, duration: 500}).data('open',true);
}).on('close', function() {
    $(this).parent().animate({left:'-338px'}, {queue:false, duration: 500}).data('open',false);
}).on('click', function(){
    if ($(this).parent().data('open')){
        $(this).trigger('close');
    }else{
        $(this).trigger('open');
    }
});
$(document).on('click', function(){
     $('h2.tab-title').trigger('close');
});

$('.side-tab').on('click', function(e){ e.stopPropagation(); }); // stop any click in the side tab from bubbling up to the document

Answer 2

我认为最好的方法是添加一个类，例如将opened添加到已打开的div中，然后使用这个类触发div的toggle方法。调用的toggle方法将处理关闭的动画。当然，当切换回关闭状态时，opened类应该被删除，就像popnoodles提醒我的那样。

编辑：更新的代码，它的行为符合您的要求：

jQuery(function($) {
    $('h2.tab-title').toggle(function() {
        $(this).parent().animate({left:'0px'}, {queue:false, duration: 500});
        $(this).parent().addClass('opened');
    }, function() {
        $(this).parent().animate({left:'-338px'}, {queue:false, duration: 500});
        $(this).parent().removeClass('opened');
    });

});
jQuery(".side-tab").click(function(){ return false; });
jQuery(document).bind("click", function() { jQuery(".opened h2.tab-title").trigger('click');});

Answer 3

将切换更改为单击，删除第二个函数，并进行验证以检查其是否打开或关闭(如获取left属性并检查是否小于0)

第一次单击调用第一个函数并显示div。在div外部单击时，div将关闭。

当您再次单击它时，将调用第二个函数，即close函数！这就是为什么不工作的原因！