jQuery隐藏下拉菜单

Question

我有一个下拉菜单，其中显示以下jQuery脚本：

jQuery(document).ready(function($) {
    $('#block-mln-main-menu li').click(function(){
        $(this).find('.test').toggle(); 
    });
});

我想要实现的是，当用户单击页面上的其他任何位置时，它会向上滑动或隐藏。 我实在不知道如何实现这一目标。

任何帮助是极大的赞赏。

添加了一个小提琴： http : //jsfiddle.net/aL7Xe/999/

Answer 1

切换仅在用户单击其他位置上要隐藏的对象时才起作用。

jQuery(document).ready(function($) {
    $(this).not('#block-mln-main-menu li').click(function(){
        $(this).find('.test').hide(); 
    });
});

Answer 2

据我了解，您想在用户单击下拉菜单时显示它。 如果用户再次单击它或页面上的任何位置，则应将其关闭。

CSS

.hide {
  display: none;
}

JS

$('.menu-label').on('click', function() { 
  $('.drop-down-menu').toggleClass('hide');
});

当用户单击页面上的任意位置时隐藏菜单

$('body').on('click', function() { 
  $('.drop-down-menu').addClass('hide');
});

Answer 3

Yoy可以尝试停止传播事件。

CSS：

.showup{width:100px;height:100px; background:red; display:none;}
.click{cursor:pointer;}

HTML

<div class="click">click me</div>
<div class="showup">Click somewhere else!</div>

JQUERY

$(document).ready(function(){
$('.click').click(function(event){
    event.stopPropagation();
     $(".showup").slideToggle("fast");
});
$(".showup").on("click", function (event) {
    event.stopPropagation();
});
});

$(document).on("click", function () {
    $(".showup").hide();
});