Question

我试图弄清楚当用户点击它之外时如何使菜单消失。我的方法是：

$(*).not(menu).bind('click', function() { $(menu).hide() })

由于某种原因，这是行不通的。知道我可能做错了什么吗？谢谢

Answer 1

此

$('*').

是邪恶，疯狂和坏的业力！

改为使用

$(document.body).bind('click', function(e){
    if(e.target.id !== 'yourmenuid' || $(e.target).parents().is('#yourmenuid'))
       $('#menuid').hide();
});

尽量避免使用通用选择器*。 Sizzle确实会查询标记中所有可用的元素，这些元素非常昂贵。

Answer 2

最快捷，最简单的方法：

jQuery(document).delegate(':not(#menu-id)', 'click', function(){
    $('#menu-id').hide();
});

可替换地：

$(document).click(function(){
    if ( e.target !== menu && !$.contains(e.target, menu) ) {
        $(menu).hide();
    }
});

Answer 3

这是一个坏主意。

写$('*')会将您的点击处理程序添加到文档中的每个元素，这将会很慢。此外，它不会处理稍后添加的任何新元素的点击。（除非他们冒泡）

相反，您应该处理根元素的click事件，如下所示：

$(document).click(function(e) {
    if (e.target === menu || $(e.target).parents().is(menu))
        return;
    $(menu).hide();
});

任何元素上的所有click事件最终都会冒泡到根元素（除非您取消它），因此这将处理每次单击。

Answer 4

作为替代方案，您考虑过jQuery.hover吗？

$('#menu > ul > li').hover(
    function() { $('ul', this).show(); }, 
    function() { $('ul', this).hide(); }
);

鼠标悬停/鼠标移动时出现/消失是一种更常见的做法。您甚至可以使用jQuery.slideDown()和jQuery.slideUp()使其更流畅。

$('#menu > ul > li').hover(
    function() { $('ul', this).slideDown(250); }, 
    function() { $('ul', this).slideUp(100); }
);

除了这个及其后代之外，jquery选择任何东西

4 个答案: