jQuery - 显示和隐藏模式

Question

我得到以下问题： 我有一个模式，当我点击Nav上的按钮时滑动，并且模式上有一个关闭按钮来关闭它。但我也想当我点击外部模式时，这将关闭。

$('.open').on('click', function(){ 
    $('.modal').animate({ 'marginTop': '0px' }, 500); 
    }) 

$('.close, .main-content').on('click', function(){ 
    $('.modal').animate({ 'marginTop': '-50px' }, 500); 
}) 

在这里我的Codepen显示我的问题。 http://codepen.io/larz/pen/cCiwg

Answer 1

您示例中的问题是，点击“打开”时，两个点击事件都会执行。因此它会立即打开然后关闭。

要修复它，只需将event.stopPropagation()添加到您的'打开'点击处理程序。这将防止点击事件冒泡到.main-content。

$('.open').on('click', function(ev){ 
    ev.stopPropagation(); 
    $('.modal').animate({ 'marginTop': '0px' }, 500); 
}); 

http://codepen.io/anon/pen/djmun