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