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

我认为最好的方法是将一个类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 2

demo

创建一个打开和关闭事件，并在后续点击中触发一个或另一个，触发文档点击关闭。

<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 3

更改切换以单击，删除第二个功能并进行验证以检查其是打开还是关闭（如获取左侧属性并检查是否小于0）

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

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

jQuery在div外面点击动画它关闭了工作但必须点击两次才能打开

3 个答案: