slideToggle和:visible

Question

使用sliderToggle方法时，:visible表达式似乎永远不会返回true以外的任何值。

如果我手动使用show/hide与:visible表达式结合使用，则可以正常工作。

失败示例：

jQuery(".fileNode .nodeExpander").click(function() {
    var notes = jQuery(this).parent().siblings(".fileNotes");
    notes.slideToggle ("fast");

    var isVisible = notes.is(":visible"); // Always returns true...

    // Do stuff based on visibility...
});

工作的例子:

jQuery(".fileNode .nodeExpander").click(function() {
    var notes = jQuery(this).parent().siblings(".fileNotes");
    var isVisible = notes.is(":visible");

    if (isVisible)
        notes.hide("fast");
    else
        notes.show("fast");

    // Do stuff based on visibility...
});

一些HTML：

<ul>
    <li class="fileNode">
        <img src="<%= Url.Content ("~/Images/Collapse.png") %>" alt="<%= UIResources.CollpaseAltText %>" class="nodeExpander" />
    </li>
    <li class="fileLink">
        <%= Html.ActionLink (file.Name, "Details", new { id = file.FileId }) %>
    </li>
    <li class="fileNotes">
        <%= file.Description %>
    </li>
</ul>

我假设 slideToggle 没有执行 show 或 hide - 有什么其他可以检查的吗？

我已经在 Firefox 3.5、IE 7、8 和 Chrome 4 中尝试了，结果都一样。

谢谢， K

- Kieron

Answer 1

你的第一个（未能正常工作的）代码片段将测试 :visible，而 slideToggle 正在中间转换过程中（更准确地说，它会在转换开始后立即进行测试）。无论您是打开还是关闭，中间状态都将是 :visible - 因此您始终会得到 true。

在调用 slideToggle 之前，请尝试检查 .is(":visible")。

- searlea

---

当然可以！谢谢，我现在感觉像个木偶 - 在 slideToggle 之前调用 var isVisible = !notes.is(":visible"); 我得到了所需的答案。谢谢！ - Kieron

有点违反直觉，但是完全合理。如果我们只有一个jQuery对象的内部滑动状态... - Hoàng Long

Answer 2

尝试添加一个处理程序。

notes.slideToggle ("fast", function() { 
  var isVisible = notes.is(":visible");
});

- Andy Gaskell