单击以显示无/带有条件的块

Question

我不知道为什么 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>，当我单击按钮时打开，当我单击页面上的任意位置时关闭。

Answer 1

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，但阻止该侦听器激活并在点击#buttonDiv 时显示#hiddendDiv。

Answer 2

$(document).on('click', '#test', function () {
    if ($('#text').hasClass("disabled")) {
        $('#text').css("display", "none");
        $('#text').removeClass('disabled');
    }
    else
    {
        $('#text').css("display", "block");
        $('#text').addClass('disabled');
    }

});