如何使用jQuery关闭嵌套折叠
如何使用jQuery关闭嵌套折叠
提问于 2019-09-27 23:14:40
我嵌套了两个手风琴，一切都如我所愿。然而，我的最后一步是让主accordion切换在单击时关闭所有内容，当单击main按钮时，我很难选择要关闭的内部accordion。again...here是带有一个内部accordion的accordion示例
HTML：
<!--accordion-->
<button class="btn-reset-styles faq-accordion-btn" type="button" data-toggle="collapse"
data-target="#faqCollapse"
aria-expanded="false" aria-controls="faqCollapse">
Hello, how may I assist you?
<i class="fas fa-angle-right"></i>
<i class="fas fa-angle-down d-none"></i>
</button>
<div class="collapse" id="faqCollapse">
<div class="accordion-content accordion-content--body">
<!--inner accordion parent-->
<div id="faq-inner-accordion">
<!--accordion blocks-->
<div class="accordion-link-block" data-toggle="collapse" data-target="#collapseOne" role="button"
aria-expanded="false" aria-controls="collapseOne">
<!--accordion inner collapse block-->
<div class="accordion-link-block--inner">
<p>Do you offer a Prescription Assistance Program for LATUDA?</p>
<div class="btn-reset-styles btn-arrow-right">
<i class="fas fa-angle-right"></i>
<i class="fas fa-angle-down d-none"></i>
</div>
</div>
<div class="collapse" id="collapseOne" data-parent="#faq-inner-accordion">
<div class="inner-accordion-answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat!
</div>
</div>
</div>
</div>Jquery：
$(document).ready(function () {
//accordion btn
$($faqAccordionBtn).on('click', function () {
$(this).toggleClass('no-bottom-radius');
$(this).find('i').toggleClass('fa-angle-right').toggleClass('fa-angle-down');
});
//accordion arrow right button inner content
$($innerAccordionLink).on('show.bs.collapse', function (e) {
toggleIcon.call(this);
$(this).find('.collapse').collapse('hide');
});
$($innerAccordionLink).on('hide.bs.collapse', function (e) {
toggleIcon.call(this);
});
});
/* end doc.ready */
//toggle arrow right / down
function toggleIcon() {
$(this).find('i').toggleClass('fa-angle-right').toggleClass('fa-angle-down');
}Stack Overflow用户
发布于 2021-03-04 01:47:00
如果有人正在寻找这个，在2021年要关闭所有手风琴，只需使用以下代码(请注意-1)
$('.yourAccordion').accordion("option", "active", -1);要关闭所有嵌套的折叠效果，可以使用单独的类，然后使用以下代码。
jQuery('.parentAccordion, .childAccordion').accordion({
collapsible: true,
active: false,
heightStyle: 'content'
,
beforeActivate: function (e, ui) {
if($(this).hasClass('parentAccordion')){
$('.childAccordion').accordion("option", "active", -1);
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58137254
复制相关文章
相似问题
腾讯云开发者
