0

我在这里设置了一个开发页面：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}); });
4

3 回答 3

1

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

编辑：按照您的意愿更新的代码：

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');});
于 2013-02-07T23:00:24.537 回答
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
于 2013-02-07T23:11:45.293 回答
0

将切换切换为单击，删除第二个功能并进行验证以检查其是否打开或关闭（例如获取 left 属性并检查是否小于 0 ）

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

当您再次单击它时，您调用了第二个函数，即关闭函数！这就是为什么不起作用！

于 2013-02-07T22:59:30.193 回答