javascript - 通过单击链接打开/隐藏已经打开的 div

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();
});