Question

您可以看到我的实时演示here.我想要正确显示下拉菜单。现在它在第一次点击时突然隐藏起来。并且当我点击/当前显示的下拉菜单中的任何地方点击时，我想让下拉菜单消失。我该怎么做？

这是我的jQuery代码

$(document).ready(function () { 
    $('#jsddm > li').click(function(e){
        e.preventDefault();
        $(this).find('ul').eq(0).css('visibility', 'visible').slideToggle();
    });
});

我注意到，如果删除.css('visibility', 'visible')，则下拉菜单将不再有效。

Answer 1

由于只在单击“li”元素时调用了您的函数，因此单击文档中的任何其他位置都不会产生任何影响。您可以向隐藏菜单的整个主体添加单击事件。为此，您还需要停止菜单中的click事件冒泡到文档，否则它将立即显示然后隐藏。

尝试这样的事情：

$(document).ready(function () {

$('#jsddm > li').click(function(e){
      e.stopPropagation();
      e.preventDefault();
      $(this).find('ul').eq(0).slideToggle();
});

$(document).click(function (e) {
    $('#jsddm > li').find('ul').eq(0).slideUp();
});

}）;

您也不需要使用visibility：hidden，它只会让您做更多的工作。这是我对CSS的编辑以及上面编辑的代码，它似乎在我制作的本地副本中工作：

替换

#menu #jsddm li ul{margin: 0; padding: 0; position: absolute; visibility: hidden; width:220px; z-index:9999;}

使用

#menu #jsddm li ul{margin: 0; padding: 0; position: absolute; display:none; width:220px; z-index:9999;}

Answer 2

尝试在一开始就为所有代码设置“显示”为“无”。

$(document).ready(function () { 
   $('#jsddm > li > ul').css("display", "none");
   // ur code
}

Answer 3

也许你应该首先检查它是否已经可见，然后再做你的代码。类似的东西：

$(document).ready(function () { 
    $('#jsddm > li').click(function (e) {
        e.preventDefault();
        if ($(this).find('ul').eq(0).is(':visible')) {
            $(this).find('ul').eq(0).slideUp();
        } else {
            $(this).find('ul').eq(0).slideDown();
        }
    });
});

为什么我的下拉菜单在第一次点击后突然消失了？

3 个答案: