jQuery的点击一个div外动画关闭它的作品，但必须单击两次打开

我有一个dev的页面在这里设置：http://dev.harryg.me/da/jQuery的点击一个div外动画关闭它的作品，但必须单击两次打开

在身边，我有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}); });

来源

2013-02-07 harryg

您使用的切换。点击一个，它已打开。再次点击它关闭，再次点击它已打开。以其他方式关闭它......它仍然**在**上。 – Popnoodles

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>

$('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-07 23:11:45 Popnoodles

做了一个梦。非常感谢 – harryg

你能否提出一种避免内部点击的传播比我用过的方式更简单？ – harryg

我在我的代码中做过。这么多迂回，你无法发现它。 – Popnoodles

更改切换点击，删除第二个功能，并作出验证，以检查其打开或关闭（如获得左侧的属性，并检查是否小于0 ）

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

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

来源

2013-02-07 22:59:30

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

来源

2013-02-07 23:00:24

@popnoodles真的，我忘了写这个。谢谢。 –

看起来不错，但我选择了popnoodles。感谢 – harryg

jQuery的点击一个div外动画关闭它的作品，但必须单击两次打开

回答

相关问题