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();
});

jQuery隐藏下拉菜单

3 个答案: