Question

我点击.products链接时会打开导航栏，如果点击屏幕上的任意位置，我会关闭。但似乎如果你在.product链接已经打开时单击它，它就不会关闭。我怎样才能做到这一点？

$('#subnav').hide();

$(document).on('click', function(e) {
    if ( $(e.target).closest('.products').length ) {
        $("#subnav").show();
    }else if ( ! $(e.target).closest('#subnav').length ) {
        $('#subnav').hide();
    }
});

Answer 1

<强> Demo

JS

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

$(".products").click(function (e) { //the usual behavior on click on .prducts
    $("#subnav").toggle();
    e.stopPropagation();
});

$("#subnav").click(function (e) { //ensures the #subnav will not hide on click on it
    e.stopPropagation();
});

$(document).click(function () { //ensures the #subnav will hide on click on document
    $("#subnav").hide();
});

Answer 2

您需要在文档上单击事件以隐藏块，并在按钮上单击事件以显示块。如果出现按钮，您需要停止传播文档的事件。

就像那样：

$("div").hide();

$("button").bind("click",function(e){        
    e.stopPropagation();    
    $("div").toggle(200);
});

$(document).bind("click",function(){
    $("div").hide(200);
});

假设您的代码如下：

<div></div>
<button>open</button>

参见示例：http://jsfiddle.net/oqgpceod/1/

Aditionnaly你可以添加这段代码，以防止你点击它时隐藏块：

$("div").bind("click",function(e){        
    e.stopPropagation();    
});

Answer 3

小提琴：http://jsfiddle.net/r2h57jhu/

$(document).ready(function () {    
    $('#subnav').hide();
    $(document).click(function(e) {                    
       $('#subnav:visible').hide();        
    });    


    $('.products').click( function (e) {        
        $('#subnav:not(:visible)').show();
        e.stopPropagation();
    });
});

单击链接打开/隐藏已打开的div

3 个答案: