jQuery 隐藏下拉菜单

Question

我有一个显示以下 jQuery 脚本的下拉菜单：

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

我想实现的是当用户点击页面其他地方时，它向上滑动或者隐藏。我真的不知道如何实现这一目标。

非常感谢任何帮助。

添加了一个 fiddle : 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

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

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 隐藏下拉菜单

jQuery hide dropdown menu

javascript

jquery

hide

drop-down-menu