0

我有一个按钮，点击后会在按钮右侧弹出一个菜单。这个菜单是一个相当大UL的列表项。此菜单所在的页面包含许多其他元素。

菜单弹出后，用户可以单击菜单上的选项，菜单将消失（menu.hide()）。

但是，无法以任何其他方式摆脱菜单感觉很奇怪。我喜欢“如果用户点击菜单以外的任何东西，菜单就会隐藏”的想法。但我讨厌做一个“clickoutside”事件，它将事件绑定到除菜单之外的所有内容。

另一个选项是“mouseout”，但“mouseout”总是过早触发，因为鼠标必须穿过屏幕才能到达菜单。

关于我可以将什么事件绑定到菜单的任何想法，以便用户可以自然地、随意地摆脱它？（不仅仅是当他点击一个选项时）

4

2 回答 2

1

当菜单打开时，您可以将一个事件绑定到正文。使用点击事件来确定点击是否发生在菜单之外。如果在菜单之外，隐藏菜单并移除绑定。

// binding function     
closeMe = function(e) {
    var $target = $(e.target);
    // click is not inside the menu
    if(!$target.hasClass('menu') && $target.parents('.menu').length !== 1) {
        // hide menu
        menu.hide();
        // unbind events
        $('body').unbind('mousedown.menuhide', closeMe);
    }
};
// show menu
menu.show(function() {
    // bind menu hide event
    $('body').bind('mousedown.menuhide', closeMe);
});
于 2012-10-01T19:30:02.293 回答
0

很简单，只要用这样的东西

$('html').click(function() {
    menu.close();
});

$('#menu').click(function(e){
    e.stopPropagation();

    // do stuff
    // maybe some nice animation or w/e

    menu.close();
});
于 2012-10-01T19:16:17.930 回答