1

我正在使用下面的代码在单击锚点时显示/隐藏导航菜单。

我遇到的问题是第一次加载页面时，我必须单击两次锚点才能显示菜单。之后，我可以通过单击切换菜单。我还可以单击文档上任意位置的菜单以将其隐藏。

有没有人看到下面的代码有问题，或者知道当用户单击菜单时隐藏菜单的更好方法？

$('#aToggleQuickNavigation').click(function () {
    $('#ulQuickNavigation').toggle();
});

$('html').click(function () {
    if ($('#ulQuickNavigation').css('display') == 'block') {
        $('#ulQuickNavigation').css('display', 'none');
    }
    $('#aToggleQuickNavigation').click(function (event) {
        event.stopPropagation();
    });
    $('#ulQuickNavigation li a').click(function (event) {
        event.stopPropagation();
    });
});
4

2 回答 2

1

如果单击事件一直冒泡到正文，则隐藏它：

$("body").click(function(){
  $("#ulQuickNavigation").hide();
});

如果用户单击菜单上的任何位置，您已经阻止了该单击的传播，因此主体永远不会听到它，因此它不会被隐藏。

我注意到的另一件事是您将单击事件绑定在 HTML 元素的单击事件处理程序中。这可能会很成问题。每次点击冒泡到 HTML 元素时，您将绑定越来越多的点击事件。

现在就坚持这样的事情：

// Any click that arrives at the body should close my navigation
$("body").click(function(){
  $("#ulQuickNavigation").hide();
});

// Prevent clicks on nav from reaching the body
$("#ulQuickNavigation").click(function(e){
  e.stopPropagation();
});
于 2012-04-05T20:36:07.847 回答
0

您是否尝试过使用 jQuery 内置的 slideToggle 功能？

基本上它需要一个带有 display: none; 的元素。在它上面并将在单击时显示它（或在您设置更改逻辑的任何位置）。

例子：

$("#ID").slideToggle(700);

其中 700 是您希望滑动切换所花费的时间（以毫秒为单位）。

在你的情况下：

$('#aToggleQuickNavigation').click(function () { $('#ulQuickNavigation').slideToggle(500); });

于 2012-04-05T21:05:26.593 回答