当用户点击关闭菜单时，有没有更好的方法隐藏菜单？

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

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

基本上，它需要一个显示元素：无；并在单击时显示（或在设置更改逻辑的任何位置）。

例子：

$（"#ID"）. SlideSwitgle（700）；

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

在您的情况下：

$（'atoglequicknavigation'）。单击（函数（）{$（'#ulQuickNavigation'）.slideToggle（500）；}）

Answer 2

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

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

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

我注意到的另一件事是，您正在HTML元素的click事件处理程序中绑定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();
});