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/ambigously/76gUj/32/

Answer 2

如果您确定用户将单击 bible-trans 下拉列表，您可以将“blur”事件绑定到它。

$('#bible-trans').blur(function() {
    $('#bible-translation-list').fadeOut();
});

这取决于下拉列表在某个时刻的焦点。