javascript - 当用户在弹出菜单外单击时，我应该隐藏弹出菜单吗

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 方法带有超时。基本上，用户必须至少在您的元素(按下的按钮和弹出的菜单)之外花费一定的时间。