Раскрывающийся список HTML + jQuery. Когда щелкают по любой другой части страницы, FadeOut?

Question

Это, вероятно, простой вопрос, но по сути я разрабатываю раскрывающийся список HTML.

$('#bible-trans').click(function() {
    $('#bible-translation-list').fadeToggle('fast');
});

Где #bible-trans - это основная выпадающая кнопка, содержимое выпадающего меню равно #bible-translation-list. Поэтому, когда я нажимаю на главное выпадающее меню, содержимое переключается. Просто.

Что я хотел бы сделать, так это если пользователь нажимает в любом месте ДАЛЕЕ на странице, выпадающий список исчезает.

$("*").not('#bible-trans').click(function() {
    $('#bible-translation-list').fadeOut();
});

Это то, что у меня есть сейчас, но я уверен, что это неправильно - ну, очевидно, это потому, что оно не работает - когда я нажимаю, чтобы переключить #bible-trans, оно переключается, а затем сразу исчезает. Правильно ли я использую селектор not()?

РЕДАКТИРОВАТЬ: Я думаю, что это во многом связано с тем, что #bible-trans является потомком * (очевидно). Есть ли способ, которым я могу работать через это?

Answer 1

Вот один из возможных способов сделать это

http://jsfiddle.net/76gUj/29/

$(function(){
    $(document).click(function() {
       if($("#anotherDiv").is(":visible")){
           $("#anotherDiv").fadeOut();
       }
     });

   $("#testdiv").click(function(){
       $("#anotherDiv").fadeIn('fast');
       event.stopPropagation();
    });
});

Еще один пример от mu слишком короткий

http://jsfiddle.net/ambiguous/76gUj/32/

Answer 2

Если вы уверены, что пользователь будет щелкать по раскрывающемуся списку bible-trans, вы можете привязать к нему событие «размытия».точка.