2

你可以在这里看到我的现场演示。我希望下拉菜单正确显示。现在它在第一次点击时突然隐藏了。当单击当前显示的下拉菜单之外的任何位置时，我想让下拉菜单消失。我该怎么做？

这是我的 jQuery 代码

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

我注意到如果.css('visibility', 'visible')被删除，下拉菜单将不再起作用。

4

3 回答 3

4

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

尝试这样的事情：

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

});

你也不需要使用可见性：隐藏，它只是让你做更多的工作。这是我对 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;}
于 2012-12-19T03:09:21.517 回答
1

尝试一开始就将所有标签的“显示”设置为“无”。

$(document).ready(function () { 
   $('#jsddm > li > ul').css("display", "none");
   // ur code
}
于 2012-12-19T02:59:39.753 回答
0

也许你应该先检查它是否已经可见，然后再做你的代码。就像是：

$(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();
        }
    });
});
于 2012-12-19T02:49:26.377 回答