insertAfter()打破点击事件

Question

我有以下标记，由3块内容组成，每块内容包含一个标题和一些内容：

<div class="feed-panels-expanding">
    <div class="feed">

        <section>

            <h2><a href="#">Heading One</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

        <section>

            <h2><a href="#">Heading Two</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

        <section>

            <h2><a href="#">Heading Three</a></h2>
            <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>

            <div class="content">
                <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
                <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
                <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
            </div>

        </section>

    </div>
</div>

我想要它，这样点击每个标题就可以展开/关闭下面的内容。

我正在尝试获取它，以便jQuery脚本能够隐藏除第一段之外的所有内容。为了做到这一点，它取第一段并将其移出.content之外。然后隐藏.content

// feed-panels-expanding
$('.feed-panels-expanding section').each(function() {

    $(this).find('h2 a').click(function() {
        $(this).parent().next('.content').slideToggle(250);
        return false;
    });

    $(this).find('.content p:first').insertAfter($(this).find('h2'));
    $(this).find('.content').hide();

});

但是，脚本确实不喜欢我在每个内容块中移动第一个p元素。如果我删除这一行，脚本可以正常工作，当单击相关标题时，所有面板都会展开/收缩。

但是有了这一行代码，脚本就什么都不做了。我可以在单击标题时弹出一个alert语句，但它只是忽略了.content元素

Answer 1

next()在您选择的元素之后查找下一个元素。它不再是content元素。下一个元素是您刚才插入的段落。

$(this).parent().siblings('.content').slideToggle(250);

Answer 2

这是一个工作小提琴。

除了第一个内容div之外，所有的内容div最初都是隐藏的。不需要删除它并将其放置到其他地方- CSS可以通过查找第一个section元素，然后在其中找到.content div来找到它。

对于jQuery，单击事件查找section父元素，然后在其中搜索.content div以切换显示。

Answer 3

next只查看单个跟随的同级元素，然后应用筛选器。

现在简单的解决办法。在nextAll筛选器中使用.content：

$(this).find('h2 a').click(function() {
    $(this).parent().nextAll('.content').slideToggle(250);
    return false;
});

nextAll只查看后续的元素，所以当您知道后续的元素时，它比siblings更有效。