jquery - 单击以使用条件显示无/块

我不知道为什么 else 条件不起作用，我尝试了多种方法。

if($('hiddendDiv').attr('style') === 'display:none') {
    $('buttonDiv').click(function() {
        $('hiddendDiv').attr('style',"display:block");
    });
} else {
    $('body').click(function(){
        $('hiddendDiv').attr('style',"display:none");
    });
}

hiddendDiv 有 style="display:none"
当我点击 buttonDiv 时， hiddenDiv 得到 display: block ，然后当我点击页面上的任何地方(关闭 hiddenDiv )时， hiddenDiv 没有得到 display: none 。

我正在尝试制作一个 <div>，当我点击一个按钮时它会打开，当我点击页面上的任何地方时它会关闭。

最佳答案

buttonDiv 和 hiddendDiv(希望如此)不是标签名称；如果您有具有这些 ID 的元素，则需要使用前导 # 来选择它们。另外，请不要检查或更改这样的可见性。

if ($('#hiddendDiv').is(':visible')) {
    $('body').click(function () {
        $('#hiddendDiv').hide();
    });
} else {
    $('#buttonDiv').click(function () {
        $('#hiddendDiv').show();
    });
}

如果您不重新运行此代码，它不会为您更改处理程序。我会这样做:

$('body').click(function () {
    $('#hiddendDiv').hide();
});

$('#buttonDiv').click(function (e) {
    $('#hiddendDiv').show();
    e.stopPropagation();
});

即在任何地方单击时隐藏 #hiddendDiv，但在单击 #hiddendDiv 时阻止该监听器激活并显示 #buttonDiv。