Question

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

我遇到的问题是第一次加载页面时，我必须单击两次锚点才能显示菜单。之后，我只需点击一下即可切换菜单。我也可以点击文档上任意位置的菜单来隐藏它。

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

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

Answer 1

如果点击事件一直冒泡到身体，则隐藏它：

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

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

我注意到的另一件事是你在HTML元素的click事件处理程序中绑定你的点击事件。这可能很成问题。每次点击冒泡到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();
});

Answer 2

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

基本上它需要一个带display：none的元素;在它上面并在点击时显示它（或在你设置更改逻辑的任何地方）。

示例：

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

其中700是您希望幻灯片切换的时间（以毫秒为单位）。

在你的情况下：

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

当用户点击菜单时，是否有更好的隐藏菜单的方法？

2 个答案: