My code:
<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>
I use jquery toggle() function to show/hide. But toggle() doesn't change css value, so you can't use .css("display") function to check the state of display.Even elements are hidden, .css("display") always returns "block", if your original css sheet defines "display:block;".
How do you detect display state which meens that if the element is shown or hidden? Or, do you know the way to change real display value which toggle() couldn't achieve?
note: you can't use the way shown below, because the previous code is test code and in real codes, toggle() and .css("display") are in different functions and excuted in completely different timing.
$("ul").toggle("slow", function() {
...
}