0

我的代码：

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

您如何检测显示状态，这意味着元素是显示还是隐藏？或者，您知道更改 toggle() 无法实现的实际显示值的方法吗？

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

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

2 回答 2

2

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

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

于 2013-07-23T13:15:01.923 回答
0 
$(function(){
  $("body").click(function(){
     $("ul").toggle("slow",function(){
         console.log($(this).css('display')); //none
      });
    });
});
于 2013-07-23T13:17:29.303 回答