Question

我的代码：

<script type="text/javascript">
    $(function(){
        $("body").click(function(){
            $("ul").toggle("slow");
            var b = $("ul").css("display");
            console.log("ul display :"+b);// unfortunately,always returns block!
    });
});
</script>
</head>
<body>
    <nav>
        <ul>
            <li><a href="/">home</a></li>
            <li><a href="/archive/">Archive</a></li>
            <li><a href="/about/">About</a></li>
            <li><a href="/contact/">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

我使用jquery toggle（）函数来显示/隐藏。但是toggle（）不会改变css值，所以你不能使用.css（“display”）函数来检查display.Even元素是隐藏的，.css（“display”）总是返回“block”，如果您的原始css表定义“display：block;”。

如何检测显示状态，如果元素显示或隐藏？或者，你知道改变toggle（）无法实现的实际显示值的方法吗？

注意：您不能使用下面显示的方式，因为前面的代码是测试代码，而在实际代码中，toggle（）和.css（“display”）具有不同的功能，并且在完全不同的时间内执行。< / p>

$("ul").toggle("slow", function() {
  ...
}

Answer 1

我认为这里的主要问题是代码在检查状态时没有等待动画完成，因此它在运行时实际上仍然可见。

如果在动画完成后检查状态（在回调函数中），它会正确返回none：

$("body").click(function(){
    $("ul").toggle("slow", function() {
        var b = $("ul").css("display");
        console.log("ul display :"+b); // This will return none
    });
    var b = $("ul").css("display");
    console.log("ul display :"+b); // This will return block
});

此示例将隐藏元素 - http://jsfiddle.net/Vw9nA/

后立即显示块然后不显示

但正如评论和其他相关问题所述，检查可见性的最佳方法是$('ul').is(':visible')

Answer 2

$(function(){
  $("body").click(function(){
     $("ul").toggle("slow",function(){
         console.log($(this).css('display')); //none
      });
    });
});

jquery css函数不适用于检测显示/隐藏的元素

2 个答案: