jquery - 菜单 div 向上滑动外部单击

Question

<a class="btn">Click ME </a>

<div class="content">
    Content
</div>

$('.btn').click(function(){
    $('.content').slideToggle();
});

在这里摆弄

工作正常，但我的问题是当我们点击外部.btn 按钮时需要向上滑动div.content

谢谢

Answer 1

$('.btn').click(function(e){
     $('.content').slideToggle();
     e.stopPropagation();
});

$(document).click(function(){
     $('.content').slideUp();
})

工作小提琴

Answer 2

试试这个，我认为更有用和简单的代码

$('.btn').click(function(){
    $('.content').delay(100).slideDown( function(){
});

});
$('html').click(function(){
  if( $('.content').is(':visible') ) {
     $('.content').slideUp();
  }
});

演示

Answer 3

这样做是查找所有点击。

如果点击不是在内容上，而不是在 btn 上，它将向上滑动菜单。

 $(document).click(function(e){
    if (!$(e.target).hasClass('content') &&  !$(e.target).hasClass('btn') ) {
         $('.content').slideUp();
    }
});

Answer 4

工作演示

尝试这个

$('.btn').click(function (event) {
    $('.content').slideToggle();
    event.stopPropagation();
});
$(document).click(function() {
   $('.content').slideUp();
});

Answer 5

使用以下代码：

$("body").click
(
  function(e)
  {   
    if(e.target.className !== "btn")
    {
      $('.content').slideToggle();
    }
  }
);

http://jsfiddle.net/zFUUq/5/

Answer 6

尝试

$('.btn').click(function(){
    $('.content').slideToggle();
    return false;
});

$(document).click(function(e){
    if(!$(e.target).closest('.content').length){
        $('.content').slideUp();
    }
})

演示：小提琴