有没有更好的方式来隐藏菜单，当用户点击它？

我使用下面的代码来显示/隐藏导航菜单，点击锚点。有没有更好的方式来隐藏菜单，当用户点击它？

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

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

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

来源

2012-04-05 user1316222

在鼠标悬停时，如果他们支付页面的任何额外的端口，一般菜单工作不能点击。这种方式鼠标关闭他们，而不是点击。您应该重新考虑这里的用户体验。 – 2012-04-05 20:35:31

你不在乎任何用键盘导航的人。我真的会推荐用像superfish这样的解决方案。 – steveax 2012-04-05 20:37:03

可以提供html代码吗？我认为你推荐使用悬停而不是点击 – 2012-04-05 20:43:47

隐藏它，如果点击事件气泡一路机体：

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

来源

2012-04-05 20:36:07 Sampson

非常感谢乔纳森。这解决了我的问题。奇怪的是，我在网站的另一部分使用了hide（）。不知道我是如何忽略它的。我想我太分心了，试图弄清楚为什么我的代码不起作用。干杯。 – user1316222 2012-04-05 23:39:47

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

基本上它需要一个显示元素：none;在它上面并且会在点击（或者你设置改变逻辑的地方）显示它。

例子：

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

，其中700是你想要的幻灯片切换采取以毫秒为单位的时间。

你的情况：

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

来源

2012-04-05 21:05:26 MrShmee

谢谢MrShmee。我对这个接口有非常特殊的要求，所以slideToggle是不合适的。 – user1316222 2012-04-05 23:41:19

有没有更好的方式来隐藏菜单，当用户点击它？

回答

相关问题