我有以下标记,由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
元素
5条答案
按热度按时间9o685dep1#
next()
查找所选元素之后的下一个元素。它不再是content
元素。下一个元素是您刚刚插入的段落。3gtaxfhh2#
这是一个working jsfiddle。
除了第一个内容div之外,所有内容div最初都是隐藏的。不需要将其删除并放置在其他地方- CSS可以通过查找第一个
section
元素然后在其中查找.content
div来找到它。对于jQuery,click事件查找
section
父元素,然后在其中搜索.content
div以切换显示。waxmsbnn3#
next
only 查看单个后续兄弟元素,然后应用过滤器。现在简单的修复。将
nextAll
与.content
过滤器配合使用:nextAll
只查看后面的元素,所以当你知道后面的元素时,nextAll
比siblings
更有效。s5a0g9ez4#
我认为你的问题是内容的选择检查片段
你做了$(this).parent(),它是h2标签而不是.content,然后使用find better来查找元素.content
mqkwyuun5#
我想你想要的是 accordion 。
更多信息:http://inspirationalpixels.com/tutorials/creating-an-accordion-with-html-css-jquery