[英]Make Accordion Close on second click JQUERY
I have made JQUERY Accordions which work fine. 我制作了可以正常工作的JQUERY手风琴。
HTML: HTML:
<div id="accordion">
<div class="title"><span>Accordian 1</span></div>
<div class="hide">
<p>hidden content</p>
</div>
<div class="title"><span>Accordian 2</span></div>
<div class="hide">
<p>hidden content</p>
</div>
<div class="title"><span>Accordian 3</span></div>
<div class="hide">
<p>hidden content</p>
</div>
<div class="title"><span>Close all the accordions</span></div>
</div>
JQUERY JQUERY
$(document).ready(function() {
$('#accordion .hide').hide();
$('#accordion .title span').click(function(){
$('#accordion .hide').slideUp();
$(this).parent().next().slideDown();
return false;
});
}); });
What I would like is when a user clicks an accordion to open it, and then clicks it a second time that it would close. 我想要的是用户单击手风琴以将其打开,然后再次单击将其关闭。
So 1st click = open, 2 click = close. 因此,第一点击=打开,第二点击=关闭。
How would I go about this? 我将如何处理?
Thanks 谢谢
HTML : HTML:
<div id="accordion">
<div class="title"><span>Accordian 1</span></div>
<div class="hide">
<p>hidden content</p>
</div>
<div class="title"><span>Accordian 2</span></div>
<div class="hide">
<p>hidden content</p>
</div>
<div class="title"><span>Accordian 3</span></div>
<div class="hide">
<p>hidden content</p>
</div>
<div class="close"><span>Close all the accordions</span></div>
</div>
Use slideToggle()
, to toggle between slideUp
and slideDown
使用
slideToggle()
,在slideUp
和slideDown
之间切换
$(document).ready(function() {
$('#accordion .hide').hide();
$('#accordion .title span').click(function(){
$(this).parent().next()
.slideToggle()
.siblings('.hide').slideUp();
return false;
});
$('.close').click(function(){
$('#accordion .hide').slideUp();
});
});
Try this: 尝试这个:
$('#accordion .hide').hide();
$('#accordion .title span').click(function () {
$(this).parent().next().slideToggle().siblings('.hide').slideUp();
});
$('#accordion .title span:last').click(function () {
$('#accordion .hide').slideUp();
});
You can use the following solution to make the accordion close on the second click in jQuery: 您可以使用以下解决方案在jQuery的第二次单击上使手风琴关闭:
$("#accordion").accordion({
heightStyle: "content",
autoHeight: false,
clearStyle: true,
collapsible: true, //this makes the selected tab close on second click
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.