javascript - Close accordion upon opening another accordion with different parent
问题描述
I have the following accordion setup: https://jsfiddle.net/n4tmjaqd/1/
How can I adjust the function so that tab 1 closes when either tabs 2 or 3 open (and vice versa)? Tab 1 has a different parent than tabs 2 and 3, albeit with the same class. Would it even be possible to have such a function with different parents with the same class, or would I need to adjust the parent class name of say tab 1 and create a new function from there on? Guidance much appreciated.
$(function() {
$('.accordion .accordion-title').on('click', toggleAccordion);
function toggleAccordion(event) {
var target = $(event.target).closest('.accordion-item');
target.parent('.accordion').find('.accordion-item').not(target).removeClass('is-open');
target.toggleClass('is-open');
}
});
.accordion .accordion-item {
border-bottom: 1px solid #000;
}
.accordion .accordion-title {
position: relative;
padding: 15px;
cursor: pointer;
}
.accordion .accordion-content {
display: none;
padding: 0 15px 15px;
}
.accordion .accordion-item.is-open .accordion-content {
display: block;
}
.accordion .arrow {
position: absolute;
display: inline-block;
padding: 5px;
top: 13px;
right: 15px;
background-color: inherit;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.accordion .accordion-item.is-open .arrow {
top: 20px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
TITLE 1
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 1
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
TITLE 2
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 2
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
TITLE 3
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 3
</div>
</div>
</div>
解决方案
Just add this at the beginning of the click event handler
$('.accordion-item').not($(event.target).parent()).removeClass('is-open');
Here is a working snippet (fiddle):
$(function() {
$('.accordion .accordion-title').on('click', toggleAccordion);
function toggleAccordion(event) {
var text = $(event.target).find('span').text();
if(text==="+") {
$(event.target).find('span').text('-');
} else {
$(event.target).find('span').text('+');
}
$('.accordion-item').not($(event.target).parent()).removeClass('is-open');
var target = $(event.target).closest('.accordion-item');
target.parent('.accordion').find('.accordion-item').not(target).removeClass('is-open');
target.toggleClass('is-open');
}
});
.accordion .accordion-item {
border-bottom: 1px solid #000;
}
.accordion .accordion-title {
position: relative;
padding: 15px;
cursor: pointer;
}
.accordion .accordion-content {
display: none;
padding: 0 15px 15px;
}
.accordion .accordion-item.is-open .accordion-content {
display: block;
}
.accordion .arrow {
position: absolute;
display: inline-block;
/* padding: 5px; */
top: 10px;
font-size: 22px;
right: 15px;
width: 20px;
text-align:center;
background-color: inherit;
/* border: solid #000; */
/*border-width: 0 2px 2px 0;*/
/* transform: rotate(45deg); */
/* -webkit-transform: rotate(45deg); */
}
/*.accordion .accordion-item.is-open .arrow {
top: 20px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
TITLE 1
<span class="arrow">+</span>
</div>
<div class="accordion-content">
CONTENT 1
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
TITLE 2
<span class="arrow">+</span>
</div>
<div class="accordion-content">
CONTENT 2
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
TITLE 3
<span class="arrow">+</span>
</div>
<div class="accordion-content">
CONTENT 3
</div>
</div>
</div>
推荐阅读
- c++ - 什么是'?在 C++ 的这个陈述中是什么意思?
- python - 尽管模型摘要清晰,Keras 变分自动编码器停止工作?
- javascript - 节点 Mqtt.js 结构化代码/最佳实践
- java - Scala Map[String, Int] 类铸造灾难
- asp.net-core - 将 F# ASP.NET Core 应用程序从 .NET 3.1 更新到 5.0
- php - 在 PHP MsSQL 中检查可用性和房间预订
- javascript - 为什么即使我使用 chrome 浏览器,赛普拉斯在 GUI(柏树打开)中的测试通过但在命令行(柏树运行)中失败?
- node.js - 如何设置 --max_old_space_size 以及如何获得实际大小?
- node.js - 无法选择名称中包含数字的“模式”
- python - tensorflow 2,使用张量作为没有for循环的索引