如何根据给定的html结构使用Jquery制作折叠效果？
如何根据给定的html结构使用Jquery制作折叠效果？
提问于 2014-10-08 12:53:38
我想用下面的结构制作一个手风琴效果。这个想法是，当我点击.booklist>li>a时，它会切换对应的文章，并且一次只能打开一篇文章。有人能帮我写这个脚本吗？欢迎使用Jquery。
http://jsfiddle.net/vinicius5581/r2zevb3d/1/
CSS
article{
display:none;
}HTML
<section>
<ul class="booklist">
<li>
<a>Article Name 1</a>
<article>
<p><content</p>
<img class="left" src="myimage"/>
<p>more content</p>
</article>
</li>
<li>
<a>Article Name 2</a>
<article>
<p><content</p>
<img class="left" src="myimage"/>
<p>more content</p>
</article>
</li>
<li>
<a>Article Name 3</a>
<article>
<p><content</p>
<img class="left" src="myimage"/>
<p>more content</p>
</article>
</li>回答 4
Stack Overflow用户
发布于 2014-10-08 13:00:08
试着这样
$(document).ready(function(){
$('.booklist>li>a').click(function(){
$('.booklist>li>a + article').slideUp();
$(this).next('article').slideDown();
});
});已在此处更新代码
$(document).ready(function(){
$('.booklist>li>a').click(function(){
$(this).next('article').slideToggle();
$(this).closest('li').siblings('li').find('article').slideUp();
});
});Stack Overflow用户
发布于 2014-10-08 12:58:51
我相信这就是你要找的：
$(".booklist li").click(function(){
$(this).find("article").slideToggle().end().siblings("li").find("article").slideUp();
});JSFIDDLE
Stack Overflow用户
发布于 2014-10-08 13:03:03
您可以使用以下代码来完成此操作
$("a").click(function(){
$(this).siblings("article").slideToggle()
.closest("li").siblings("li").find("article").slideUp();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26249418
复制相关文章
相似问题
腾讯云开发者
