在提出这个问题之前,我尝试寻找解决方案,但不幸的是,我无法在我的代码中找到任何答案!
我想强制关闭所有 Accordion 选项卡,以便用户可以根据自己的喜好打开或关闭。
我的代码是:
jQuery(".tap-title").each(function(){
jQuery(this).click(function() {
if (jQuery(this).parent().parent().hasClass("toggle-accordion")) {
jQuery(this).parent().find("li:first .tap-title").addClass("active");
jQuery(this).parent().find("li:first .tap-title").next(".accordion-inner").addClass("active");
jQuery(this).toggleClass("active");
jQuery(this).next(".accordion-inner").slideToggle().toggleClass("active");
jQuery(this).find("i").toggleClass("fa-plus").toggleClass("fa-minus");
}else {
if (jQuery(this).next().is(":hidden")) {
jQuery(this).parent().parent().find(".tap-title").removeClass("active").next().slideUp(200);
jQuery(this).parent().parent().find(".tap-title").next().removeClass("active").slideUp(200);
jQuery(this).toggleClass("active").next().slideDown(200);
jQuery(this).next(".accordion-inner").toggleClass("active");
jQuery(this).parent().parent().find("i").removeClass("fa-minus").addClass("fa-plus");
jQuery(this).find("i").removeClass("fa-plus").addClass("fa-minus");
}
}
return false;
});
});
我的 HTML 代码是:
<div class="col-md-6">
<div class="title-section text-left">
<h4 class="bold">Normal Horizontal Tabs</h4>
</div>
<scrip>
<div class="accordions-style1">
<div class="section-content">
<h4 class="tap-title active"><a href="#">What Is Yamen?<i class="fa fa-minus"></i></a></h4>
<div class="tap-inner" style="display: block;">
<p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
</div>
</div>
<div class="section-content">
<h4 class="tap-title"><a href="#">Why Should I purchase this template?<i class="fa fa-plus"></i></a></h4>
<div class="tap-inner" style="display: none;">
<p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
</div>
</div>
<div class="section-content">
<h4 class="tap-title"><a href="#">What about features?<i class="fa fa-plus"></i></a></h4>
<div class="tap-inner" style="display: none;">
<p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
</div>
</div>
</div>
</div>
最佳答案
我在 @mohamed-yousef 的帮助下找到了我的问题的答案,非常感谢你,伙计。
我用这个替换了我的 jQuery 代码:
jQuery(".tap-title").each(function(){
jQuery(this).click(function() {
if (jQuery(this).parent().parent().hasClass("toggle-accordion")) {
jQuery(this).parent().find("li:first .tap-title").addClass("active");
jQuery(this).parent().find("li:first .tap-title").next(".accordion-inner").addClass("active");
jQuery(this).toggleClass("active");
jQuery(this).next(".accordion-inner").slideToggle().toggleClass("active");
jQuery(this).find("i").toggleClass("fa-plus").toggleClass("fa-minus");
}else {
if (jQuery(this).next().is(":hidden")) {
jQuery(this).parent().parent().find(".tap-title").removeClass("active").next().slideUp(200);
jQuery(this).parent().parent().find(".tap-title").next().removeClass("active").slideUp(200);
jQuery(this).toggleClass("active").next().slideDown(200);
jQuery(this).next(".accordion-inner").toggleClass("active");
jQuery(this).parent().parent().find("i").removeClass("fa-minus").addClass("fa-plus");
jQuery(this).find("i").removeClass("fa-plus").addClass("fa-minus");
}else{
jQuery(this).toggleClass("active").next().slideToggle(200);
jQuery(this).next(".accordion-inner").toggleClass("active");
jQuery(this).parent().parent().find("i").removeClass("fa-minus").addClass("fa-plus");
}
}
return false;
});
});
并将我的 HTML 代码替换为以下代码:
<div class="col-md-6">
<div class="title-section text-left">
<h4 class="bold">Normal Horizontal Tabs</h4>
</div>
<scrip>
<div class="accordions-style1">
<div class="section-content">
<h4 class="tap-title"><a href="#">What Is Yamen?<i class="fa fa-plus"></i></a></h4>
<div class="tap-inner" style="display: none;">
<p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
</div>
</div>
<div class="section-content">
<h4 class="tap-title"><a href="#">Why Should I purchase this template?<i class="fa fa-plus"></i></a></h4>
<div class="tap-inner" style="display: none;">
<p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
</div>
</div>
<div class="section-content">
<h4 class="tap-title"><a href="#">What about features?<i class="fa fa-plus"></i></a></h4>
<div class="tap-inner" style="display: none;">
<p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
</div>
</div>
</div>
</div>
关于javascript - 强制 Accordion 关闭所有选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34233730/