当外部点击时隐藏下拉列表（jQuery）答案

【问题标题】：Hiding a dropdown when there's a click outside of it (jQuery)当外部点击时隐藏下拉列表（jQuery）
【发布时间】：2026-01-18 17:25:01
【问题描述】：

当我在下拉菜单之外单击时，我正在使用此代码隐藏它：

$('body').click(function() {
    $('#ddbox').hide();
});

$('#ddbox').click(function(event){
      event.stopPropagation();
});

它正在工作。但是，我有另一个显示/隐藏此下拉列表的链接。当我使用上面的代码时，我需要点击该链接两次才能出现下拉菜单。这是下拉菜单的显示/隐藏代码：

$('#ddtrigger').toggle(function() {
     $('#ddbox').show();
}, function() {
     $('#ddbox').hide();
});

可能是什么问题？

编辑（这是 HTML）：

<a href="#" id="ddtrigger">Some link</a>

<div id="ddbox">

    <p>Some text</p>

</div>

【问题讨论】：

【解决方案1】：

我认为这是.toggle 的问题。您有 2 个链接。因此，这两个的切换功能不会同步。你为什么不把.toggle改成这样。

$('#ddtrigger').click(function() {
     $('#ddbox').toggle();
});

【讨论】：

【解决方案2】：

可以不使用下拉菜单上的jquery blur 事件来隐藏它吗？

【讨论】：

【解决方案3】：

也许你会发现这很有用...

$(document).mouseup(function(e){
    if($( e.target ).parent( 'Object_to_hide' ).length == 0 ) {
        Object_to_hide.hide();
    }
});

我曾经用过这个，效果很好……

【讨论】：