Скрытие выпадающего списка, когда есть щелчок за его пределами (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

может быть, вы найдете это полезным ...

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

Я однажды использовал это, и это прекрасно работало ...

Answer 3

Не можете ли вы использовать событие jquery blur в раскрывающемся списке, чтобы скрыть его?