我制作了 JQUERY Accordion ,效果很好。
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
$(document).ready(function() {
$('#accordion .hide').hide();
$('#accordion .title span').click(function(){
$('#accordion .hide').slideUp();
$(this).parent().next().slideDown();
return false;
});
});
我想要的是当用户单击 Accordion 将其打开,然后第二次单击它时它将关闭。
因此,第一次点击 = 打开,点击 2 次 = 关闭。
我该如何解决这个问题?
谢谢
最佳答案
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>
使用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();
});
});
关于javascript - 第二次单击 JQUERY 时使 Accordion 关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21649839/