在外面点击时隐藏下拉列表（jQuery）

Question

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

$('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>

Answer 1

我认为这是.toggle问题。你有2个链接。因此，那些2的切换功能未同步。你为什么不把.toggle变成这样的东西。

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

Answer 2

你能否在下拉列表中使用jquery blur事件来隐藏它？

Answer 3

你可能会觉得这很有用......

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

我曾经使用过它并且效果很好......