jQuery - 显示和隐藏模式

Question

我遇到了以下问题: 我有一个模态，当我单击导航上的一个按钮时它会滑入，并且模态上有一个关闭按钮来关闭它。但我还希望当我在模式外单击时这将关闭。

  $('.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