当用户在弹出菜单外部单击时，我是否应该隐藏弹出菜单
当用户在弹出菜单外部单击时，我是否应该隐藏弹出菜单
提问于 2011-04-19 16:52:12
我有一个包含“按钮”的水平菜单。点击按钮将打开一个子菜单(不需要在悬停时打开菜单)。单击同一按钮时，子菜单将隐藏，如下所示：
标记
<div class="toolbar">
<div class="popout-wrap">
<div class="button">
</div>
<div class="popout">
blah blah blah
</div>
</div>
<div class="popout-wrap">
<div class="button">
</div>
<div class="popout">
blah blah blah
</div>
</div>
...jQuery代码
$(".popout-wrap .button").click(function () {
var menu = $(this).siblings(".popout");
if (menu.is(":hidden")) {
$(".popout").not(":hidden").fadeOut("fast");
menu.css("top", -1 * (menu.outerHeight() + 8) + "px");
menu.fadeIn("fast");
} else {
menu.fadeOut("fast");
}
return false;
});要求用户点击相同的按钮来隐藏其相应的子菜单不是很直观。让它更直观/本能/易于使用的最好方法是什么？我认为点击文档中的任何地方都会关闭弹出菜单，但不确定(i)这是不是一个好主意(ii)那么它是如何实现的。
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-04-19 17:14:50
鼠标移出是可以的，但我也会将它与文档中任何地方的单击连接起来，因为这是大多数操作系统上弹出窗口的工作方式：
//to prevent hiding when clicking on popup but it is not necessary
//$(".popout-wrap .popout").click()(function(){return false});
$(document).click(function(){
var menu = $(".popout-wrap .popout");
if (menu.is(":visible")) {
menu.fadeOut("fast");
}
return false;
});Stack Overflow用户
发布于 2011-04-19 17:07:15
我保证使用mouseout方法时会使用超时。基本上，用户必须在元素(按下的按钮和弹出的菜单)之外花费至少一定的时间。
Stack Overflow用户
发布于 2011-04-19 17:07:13
也许可以向button()添加一个模糊处理程序，并关闭该处理程序中的弹出窗口。
$(".popout-wrap .button").blur(function () {
$(this).siblings(".popout").fadeOut("fast");
return false;
});除了它不是一个真正的按钮，它是一个div，所以不会收到焦点，所以没有模糊事件。为什么不让它们变成真正的纽扣呢？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5713854
复制相关文章
相似问题
腾讯云开发者
