Question

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

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

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

另一种选择是“mouseout”，但“mouseout”总是被过早发射，因为鼠标必须穿过屏幕才能进入菜单。

关于我可以绑定到菜单的哪些事件的任何想法，所以用户可以自然地摆脱它，并且随意？（而不仅仅是当他点击一个选项时）

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

Answer 2

非常简单，只需使用类似的东西

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

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

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

    menu.close();
});

在mouseout上关闭菜单

2 个答案: