我应该隐藏弹出菜单，当用户在它外面点击时

我有一个包含“按钮”的水平菜单。点击按钮打开一个子菜单（不需要悬停的开启菜单）。当点击相同的按钮，子菜单是隐藏的，是这样的：我应该隐藏弹出菜单，当用户在它外面点击时

标记

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

来源

2011-04-19 Salman A

隐藏在鼠标离开事件是我认为最好的办法。 – KutePHP 2011-04-19 08:59:13

老鼠出来就可以了，但我还要它与任意位置单击文档中的那弹出窗口的工作方式在大多数操作系统连接：

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

来源

2011-04-19 09:14:49 firegnom

可能会在按钮（）中添加模糊处理程序并关闭该处理程序中的弹出窗口。

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

除了它不是一个真正的按钮，它的一个div所以不会收到焦点，所以没有模糊事件。为什么不让他们真正的按钮？

来源

2011-04-19 09:07:12

我保证为mouseout方法加入超时。基本上用户不得不在元素外部花费至少一定的时间量（按下的按钮和弹出的菜单）。

来源

2011-04-19 09:07:15 vbence

我应该隐藏弹出菜单，当用户在它外面点击时

回答

相关问题