当用户在弹出菜单外部单击时，我是否应该隐藏弹出菜单

Question

我有一个包含“按钮”的水平菜单。单击该按钮将打开一个子菜单（不需要在悬停时打开菜单）。单击同一个按钮时，子菜单将被隐藏，如下所示：

标记

<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）如果是那么如何实现它。

Answer 1

我保证 mouseout 方法带有超时功能。基本上，用户必须在元素之外花费至少一定的时间（按下的按钮和弹出的菜单）。

Answer 2

鼠标移出是可以的，但我也会将其与文档中任意位置的单击连接起来，因为这就是弹出窗口在大多数操作系统上的工作方式：

//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;
});

Answer 3

也许向button()添加一个模糊处理程序并关闭该处理程序中的弹出窗口。

$(".popout-wrap .button").blur(function () {
    $(this).siblings(".popout").fadeOut("fast");
    return false;
});

除了它不是一个真正的按钮之外，它是一个 div，因此不会接收焦点，因此不会发生模糊事件。为什么不把它们做成真正的按钮呢？