我试过 is(':visible')、is(':hidden') 和 css('display')但是在通过 .slideToggle()
我错过了什么？
这是 jsfiddle: http://jsfiddle.net/djlerman/jbNg3/1/
和代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Slide Toggle</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<style type="text/css">
.ui-icon {
float:left;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('span#expandList').click(function () {
if ($(this).attr('class') == "ui-icon ui-icon-triangle-1-s") {
$(this).attr('class', "ui-icon ui-icon-triangle-1-e");
} else {
$(this).attr('class', "ui-icon ui-icon-triangle-1-s");
}
$(this.parentNode).nextAll('ul').eq(0).slideToggle();
$('#debug').html($(this.parentNode).nextAll('ul').eq(0).attr('id') + ' is(:visible): ' + $(this.parentNode).nextAll('ul').eq(0).is(':visible') + '<br />' +
$(this.parentNode).nextAll('ul').eq(0).attr('id') + ' is(:hidden): ' + $(this.parentNode).nextAll('ul').eq(0).is(':hidden') + '<br />' +
$(this.parentNode).nextAll('ul').eq(0).attr('id') + ' .css(display): ' + $(this.parentNode).nextAll('ul').eq(0).css('display') + '<br />'
);
})
});
</script>
</head>
<body >
<h3>
<span id="expandList" class="ui-icon ui-icon-triangle-1-s" ></span>
Heading 1
</h3>
<ul id="heading1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>
<span id="expandList" class="ui-icon ui-icon-triangle-1-s"></span>Heading 2
</h3>
<ul id="heading2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>
<span id="expandList" class="ui-icon ui-icon-triangle-1-s"></span>Heading 3
</h3>
<ul id="heading3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="debug"></div>
</body>
</html>
最佳答案
在检查状态之前等待 slideToggle 完成。
$(this.parentNode).nextAll('ul').eq(0).slideToggle(
(function () {
$('#debug').html($(this.parentNode).nextAll('ul').eq(0).attr('id') + ' is(:visible): ' + $(this.parentNode).nextAll('ul').eq(0).is(':visible') + '<br />' +
$(this.parentNode).nextAll('ul').eq(0).attr('id') + ' is(:hidden): ' + $(this.parentNode).nextAll('ul').eq(0).is(':hidden') + '<br />' +
$(this.parentNode).nextAll('ul').eq(0).attr('id') + ' .css(display): ' + $(this.parentNode).nextAll('ul').eq(0).css('display') + '<br />'
);
}).bind(this)
);
关于javascript - 获取受 .slideToggle() 影响的显示状态元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19253648/