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

这是一个working jsfiddle.

除了第一个内容 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

更有效，当您知道元素紧随其后时。

Answer 4

我认为你的问题是内容的选择检查片段

你做了 $(this).parent() 女巫是 h2 标签而不是 .content 并使用 find 更好地找到元素 .content

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

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

    $(this).find('h2 a').click(function() {
      //you did $(this).parent() witch is the h2 tag not the scetion and use find better
        $(this).parent().parent().find('.content').slideToggle(250);
        return false;
    });

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 5

我想你想要的是手风琴。

更多信息：http://inspirationalpixels.com/tutorials/creating-an-accordion-with-html-css-jquery