Question

为什么我的$('#myDiv').css('visibility', 'visible');无效？

＆＃13;

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

＆＃13;

<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>

＆＃13;

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，因此可能无法完全满足您的需求。

Answer 2

将您的代码更改为

$('#clickdiv').click(function(){
    alert($('#myDiv').css('visibility'));

    var visiblity = $('#myDiv').css('visibility');
    $('#myDiv')
       .css('visibility', visiblity == "visible" ? "hidden" : "visible");
});

fiddle

Answer 3

使用is(':visible')检查div的可见性

$('#clickdiv').click(function () {

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

Answer 4

将第二个if更改为else if！

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

设置可见性：可见＆＃39;不管用

4 个答案: