Должен ли я скрыть всплывающее меню, когда пользователи нажимают за его пределами

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

указатель мыши в порядке, но я бы также связал его с щелчком мыши в любом месте документа, так как в большинстве ОС работают всплывающие окна:

Answer 3

возможно, добавьте обработчик размытия к кнопке () и отклоните всплывающее окно в этом обработчике.

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

За исключением того, что это не настоящая кнопка, это div, поэтому он не получит фокус, поэтому отсутсвие размытия. Почему бы не сделать их настоящими кнопками?