获取受 .slideToggle() 影响的显示状态元素？答案

【问题标题】：Get display status element effected by .slideToggle()?获取受 .slideToggle() 影响的显示状态元素？
【发布时间】：2013-10-09 04:51:10
【问题描述】：

我试过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>

【问题讨论】：

ID 必须是唯一的。

标签： javascript jquery html css slidetoggle

【解决方案1】：

在检查状态之前等待 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)
    );

【讨论】：

这行得通。谢谢你。还有其他方法可以等待 slideToggle 完成吗？这是更新的 jsFiddle：jsfiddle.net/djlerman/jbNg3/3
“.bind(this)”有什么作用？
当函数被执行时，“this”指的是函数被调用的任何上下文。为了让它在你的“span#expandList”对象上调用，“this”在函数之外引用，使用了bind。相当于 jQuery.proxy api.jquery.com/jQuery.proxy

【解决方案2】：

一次gp。提到了“事件结束”的概念我能找到这个帖子。

jQuery wait for event to complete

我不知道我不知道这个概念以及它与我遇到的问题的关系。谢谢你的鼓励。

这是更新后的 jsFiddle： http://jsfiddle.net/djlerman/jbNg3/3/

以及更新后的代码。

<!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( function () {

            $('#debug').html($(this).attr('id') +  ' is(:visible): ' +  $(this).is(':visible') + '<br />' +
                             $(this).attr('id') + ' is(:hidden): ' + $(this).is(':hidden') + '<br />' +
                             $(this).attr('id') + ' .css(display): ' + $(this).css('display') + '<br />'
                            );
        }).bind(this);

    })

});
</script>
</head>
<body >

<div id="debug"><br /><br /><br /></div>
<hr />

<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>

</body>
</html>

【讨论】：