[英]Having trouble with accordion with Jquery
My accordion works fine but I try to click on an already opened tab and it doesn't close back and also I want my accordion to close as one tab is opened the rest of the other tabs close. 我的手风琴工作正常,但我尝试单击一个已经打开的选项卡,但它没有关闭,并且我希望我的手风琴关闭,因为一个选项卡打开了,其他选项卡则关闭了。
Here is the code: 这是代码:
$(function(){
var heading = $('h1');
heading.on('click', function(event){
var target = $(event.target);
$('div.content').addClass('hidden');
target.next('div.content').removeClass('hidden');
})
});
Make sure your HTML
code is like below, 确保您的HTML
代码如下所示,
<h1>Title 1</h1>
<div class="content hidden">
Title 1 Content
</div>
<h1>Title 2</h1>
<div class="content hidden">
Title 2 Content
</div>
<h1>Title 3</h1>
<div class="content hidden">
Title 3 Content
</div>
add this jquery 添加这个jQuery
$(function(){
// hiding rest of the content block (optional), its already hidden in html code by css class
$('div.content').addClass('hidden');
$('h1').on('click', function(){
if($(this).next('div.content').hasClass('hidden')){
$(this).next('div.content').removeClass('hidden').addClass('visible');
}else{
$(this).next('div.content').removeClass('visible').addClass('hidden');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.