jquery的CSS功能不用於檢測顯示元件的工作/隱藏

我的代碼：jquery的CSS功能不用於檢測顯示元件的工作/隱藏

<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（）不會改變css值，所以你不能使用.css（「display」）函數來檢查顯示的狀態。甚至隱藏元素，.css（「display」）總是返回「block」，如果您的原始CSS表定義「顯示：塊;」。

如何檢測顯示或隱藏元素的顯示狀態？或者，您是否知道如何更改toggle（）無法實現的實際顯示值？

注意：由於前面的代碼是測試代碼，並且在實際代碼中，toggle（）和.css（「display」）具有不同的功能並且執行時間完全不同，所以不能使用下面顯示的方式。

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

來源

2013-07-23 John.A.

元素'.is（'：visible'）' –

Dupe：http://stackoverflow.com/questions/178325/testing-if-something-is-hidden-with-jquery – Dan

var c = $（「ul」）。是（「：可見」）; console.log（「ul isvisible：」+ c）; //不幸的是，**總是在切換後返回true !! **。 –

我覺得這裏的主要問題是，代碼沒有等待檢查狀態時，因此它實際上仍是可見的在運行時的動畫來完成。

如果您檢查狀態的動畫完成後（在回調函數），它正確返回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-23 13:15:01

完成時間可能不是問題，因爲即使我在切換完成後等待10秒，即使使用另一臺PC，結果也是如此。 –

好吧，所以唯一的解決辦法是從toggle（）中的函數返回b並將其作爲參數傳遞給另一個函數，對吧？ –

@ John.A。任何依賴切換完成的事情都應該從切換的回調函數中調用。 –

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

來源

2013-07-23 13:17:29 lashab

對不起，我應該告訴切換（）和顯示檢測是在另一個功能，並在另一個時間！所以，我不能說你的代碼是解決方案。 –

jquery的CSS功能不用於檢測顯示元件的工作/隱藏

回答

相關問題