jquery - 设置 'visibility: visible' 不起作用

Question

为什么我的 $('#myDiv').css('visibility', 'visible'); 不起作用？

$('#clickdiv').click(function() {
    alert($('#myDiv').css('visibility'));
    if ($('#myDiv').css('visibility') == 'hidden') {
        $('#myDiv').css('visibility', 'visible');
    }

    if ($('#myDiv').css('visibility') == 'visible') {
        $('#myDiv').css('visibility', 'hidden');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="myDiv">hide/show</div>
<div id="clickdiv">click me</div>

Answer 1

你的逻辑有问题。您有两个单独的 if 条件。当再次显示 div 时，第二个将总是触发。您需要组合到 if/else 语句:

$('#clickdiv').click(function () {
    alert($('#myDiv').css('visibility'));
    if ($('#myDiv').css('visibility') == 'hidden') {
        $('#myDiv').css('visibility', 'visible');
    }
    else {
        $('#myDiv').css('visibility', 'hidden');
    }
});

请注意，您也可以使用三元来改进逻辑:

$('#clickdiv').click(function () {
    $('#myDiv').css('visibility', function(i, v) {
        return v == 'hidden' ? 'visible' : 'hidden';
    });
});

Example fiddle

您甚至可以通过使用 toggle() 来缩短它，尽管这会设置 display 属性而不是 visibility，因此可能不符合您的要求正是需要。