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').blur(function() {
    $('#bible-translation-list').fadeOut();
});

这取决于在某个时刻关注的下拉列表。

HTML + jQuery下拉列表：当点击页面的任何其他部分时，FadeOut？

2 个答案: