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

我想你想要的是手风琴。看看这个 http://inspirationalpixels.com/tutorials/creating-an-accordion-with-html-css-jquery

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

这里是working jsfiddle.

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

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

insertAfter() 中断点击事件

insertAfter() Breaking Click Event

html

javascript

jquery

slidetoggle

insertafter