[英]How to make an accordion effect using Jquery based on a given html structure?
I would like to make an accordion effect using the following structure. 我想使用以下结构制作手风琴效果。 The idea is that when I click on .booklist>li>a it will toggle the correspondent article and only one article can be open at one time. 这个想法是,当我单击.booklist> li> a时,它将切换对应的文章,并且一次只能打开一个文章。 Could anyone help me with this script? 有人可以帮我这个脚本吗? Jquery is welcome. 欢迎使用jQuery。
http://jsfiddle.net/vinicius5581/r2zevb3d/1/ http://jsfiddle.net/vinicius5581/r2zevb3d/1/
CSS 的CSS
article{
display:none;
}
HTML 的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>
Try to this 试试这个
$(document).ready(function(){
$('.booklist>li>a').click(function(){
$('.booklist>li>a + article').slideUp();
$(this).next('article').slideDown();
});
});
Updated Code here 在这里更新代码
$(document).ready(function(){
$('.booklist>li>a').click(function(){
$(this).next('article').slideToggle();
$(this).closest('li').siblings('li').find('article').slideUp();
});
});
HTML 的HTML
<section>
<ul class="booklist">
<li> <a href="#">Article Name 1</a>
<article>
<p>
<content</p>
<img class="left" src="myimage" />
<p>more content</p>
</article>
</li>
<li> <a href="#">Article Name 2</a>
<article>
<p>
<content</p>
<img class="left" src="myimage" />
<p>more content</p>
</article>
</li>
<li> <a href="#">Article Name 3</a>
<article>
<p>
<content</p>
<img class="left" src="myimage" />
<p>more content</p>
</article>
</li>
</ul>
</section>
CSS 的CSS
ul, li, h4, p {
margin:0;
}
li {
list-style:none;
}
.booklist li a {
cursor: pointer;
}
.booklist li article {
display: none;
}
Script 脚本
$(document).ready(function ($) {
$('.booklist').find('a').click(function () {
//Expand or collapse this panel
$(this).next().slideToggle('slow');
//Hide the other panels
$(".booklist li article").not($(this).next()).slideUp('slow');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.