Question

好的，这个问题已经被问了很多..但我找不到任何适合我当前项目的答案。

我正在创建一个与facebook设置下拉列表非常类似的下拉菜单。

除了用户点击div时关闭，它才能完全正常运行。

我尝试了几件事，但是我不能缝合它来使它太有效。

这是jquery ..

$(document).ready(function(){

    $("#settings").hide();

    $("#settings_button").click(function(){
        $("#settings").toggle();

     if ($('#settings').is(":visible")){
        $('#settings_button').css({"background-Color":"darkred", "color":"red"});
        };
     if ($('#settings').is(":hidden")){
        $('#settings_button').css({"background-Color":"", "color":""});
        };
    });

});

$(document).click(function(e) {   
        if((e.target.id != 'settings_dropdown') && $('#settings_dropdown').is(":visible")) {
            $("#settings_dropdown").hide();   
        } 
});

这是一个fiddle

Answer 1

您可以在文档上发生单击时系统地隐藏下拉菜单，并在对不隐藏它的元素执行单击时停止事件传播

示例：

$(document).on( "click", function( e) {  
     $( "#settings" ).hide();
});

$( "#settings" ).on( "click", function( e ) {
    e.stopPropagation();
    // Do some stuff
});

Updated fiddle

Answer 2

这是您更新的小提琴：http://jsfiddle.net/F3X6k/8/

$(document).ready(function(){

    $("#settings").hide();

    $("#settings_button").click(function(){
        $("#settings").toggle();

     if ($('#settings').is(":visible")){
        $('#settings_button').css({"background-Color":"darkred", "color":"red"});
        };
     if ($('#settings').is(":hidden")){
        $('#settings_button').css({"background-Color":"", "color":""});
        };
    });

    $("body").click(function(e) {   

        var myTargEle = $(e.target);

        var test1 = myTargEle.parents("#settings").length;
        alert(test1);

        if(e.target.id != 'settings' && e.target.id != 'settings_button' && test1 != 1) {
            $("#settings").hide();   
        } 
    });

});

点击远离：可见div关闭它

2 个答案: