[英]Force accordion to close all tabs
在尝试问这个问题之前,我试图寻找一种解决方案,但是不幸的是,我的代码找不到任何答案!
我想强制关闭所有手风琴标签,以便用户可以按自己的意愿打开或关闭。
我的代码是:
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>
首先,作为一条友好的建议,您可以用$()
代替jquery()
函数(例如$('.tap-title').each(function(){...});)
第二,虽然我不十分了解您的HTML结构,因为您没有向其提供问题,但从外观上看,似乎您在切换手风琴类?
因此,我将针对.active类,然后移除自身的.active类并将其向上滑动,从而做些什么? 提供HTML代码对我有很大帮助,但是希望对您有所帮助。
假设您正在使用jquery-ui手风琴,我相信这会起作用:
$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
'aria-selected': 'false',
'tabindex': '-1'
});
$('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
'aria-expanded': 'false',
'aria-hidden': 'true'
}).hide();
基本手风琴:
HTML:
<div class="accordion">
<div class="accordion-head">
title here
</div>
<div class="accordion-body">
content here
</div>
</div>
CSS:
.accordion-body{
display:none;
}
jQuery (或$()而不是jQuery())
jQuery(document).ready(function(){
var items = jQuery('.accordion');
var heads = items.find('.accordion-head);
heads.click(function(){
var i = jQuery(this);
items.find('.accordion-body').slideUp(); // close all accordions
i.next('.accordion-body').slideDown();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.