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

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

转载作者：行者123 更新时间：2023-12-02 18:30:52

我的代码:

<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的状态。即使元素被隐藏，.css("display")总是返回"block"，如果您的原始 css 表定义了“display:block;”。

如何检测显示状态，即元素是显示还是隐藏？或者，你知道如何改变toggle()无法实现的真实显示值吗？

注意:不能使用下面所示的方式，因为前面的代码是测试代码，在实际代码中，toggle() 和 .css("display") 处于不同的函数中，并且执行时间完全不同。

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

最佳答案

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

如果您在动画完成后检查状态(在回调函数中)，它会正确返回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
});

此示例将在隐藏元素后立即显示 block ，然后不显示 - http://jsfiddle.net/Vw9nA/

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

关于javascript - jquery css 函数不适用于检测显示/隐藏的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17811129/