JQuery closest()帮助

Question

所以我在页面上有几个带有这种标记的容器：

        <div class="box w400">
            <div class="box-header">
                <span class="expand-collapse">expand/collapse</span>
                <h3>Heading</h3>
            </div>
            <div class="box-content">
                <p>Some content here...</p>
            </div>
        </div>

我正在尝试实现这样一个功能：在点击 .expand-collapse span 后，.box-content div 将上下滑动（切换）。

以下是我使用的 jQuery 代码，我正在尝试使用 closest() 来实现：

        $(document).ready(function() {
            $('.expand-collapse').click(function() {
                $(this).closest('.box-content').slideToggle('slow');
            });
        });

但是由于某些原因，它没有起作用 :(

- Richard Knop

Answer 1

试试这个：

$(document).ready(function() {
    $('.expand-collapse').click(function() {
        $(this).parent().next('.box-content').slideToggle('slow');
    });
});

它选取父 div 的下一个兄弟元素，而不使用 closest 方法。

- karim79

Answer 2

closest()函数用于查找最近的父元素。在您的情况下，该span元素没有任何具有.box-content类的父元素。为什么不直接使用$('.box-content').slideToggle('slow');？

编辑：我错过了您在页面上有多个这样的元素的部分。parent().next应该可以解决问题。

- Joseph Yaduvanshi

---

这会切换所有类为.box-content的div，而不仅仅是其中一个。 - karim79

因为页面上有几个容器，我希望每个 .expand-collapse span 只切换其 .box-content，而不是页面上的所有容器。 - Richard Knop

抱歉，我重新阅读了帖子，发现每页有几个。 - Joseph Yaduvanshi