打开单击的选项卡并关闭其余选项卡

Question

我正在使用JQuery来调整一些手风琴。我已经准备好了手风琴逻辑， 但无法得到想要的结果.我希望当单击选项卡时，该特定选项卡打开，如果其他选项卡打开，则关闭其他选项卡。如果单击打开的选项卡，该特定选项卡也会关闭。因此，在任何给定时间，只能打开一个选项卡，但可以关闭所有选项卡。这是小提琴 https://jsfiddle.net/4d5mjgza/

$(function() {
$('.collapsible-trigger').on('click', function() {
var panel = $(this).next()[0];
$('.collapsible-trigger').not($(this)).removeClass('is-open');
$('.collapsible-content').not(collapsible-content).removeClass('is-open');
$(this).toggleClass('is-open');
$(panel).toggleClass("is-open");
});
});

这是 HTML：

<div class="collapsibles-wrapper collapsibles-wrapper--border-bottom">
<button type="button" class="label collapsible-trigger collapsible-trigger-btn collapsible-trigger-btn--borders collapsible--auto-height" aria-controls="content" aria-expanded="false">
TITLE 1 <span class="collapsible-trigger__icon collapsible-trigger__icon--open" role="presentation">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewBox="0 0 28 16">
<path d="M1.57 1.59l12.76 12.77L27.1 1.59" stroke-width="2" stroke="#000" fill="none" fill-rule="evenodd"></path>
</svg>
</span>
</button>
<div id="content1" class="collapsible-content collapsible-content--all is-open" style="height: auto;">
<div class="collapsible-content__inner rte">
hello 1
</div>
</div>

和 CSS：

/*================ Collapsible trigger ================*/
.collapsible-trigger-btn {
text-align: left !important;
@include baseTextCenter;
@include accentFontStack;
@include accentFontSmallSize;
padding-left: 0px !important;
display: block;
width: 100%;
padding: ($gutter / 1.75) 0;
@include media-query($small) {
padding: ($gutter / 2) 0;
}
}
.collapsible-trigger-btn--borders {
border: 1px solid $colorBorder;
border-top: 0;
border-right: 0;
border-left: 0;
padding: 12px;
border-color: #343434 !important;
padding-bottom: 0px !important;
font-size: 13px;
letter-spacing: normal;
font-weight: 600;
@include media-query($small) {
font-size: 12px;
}
.collapsible-trigger__icon {
right: 12px;
}
@include media-query($medium-up) {
padding: 15px;
.collapsible-trigger__icon {
right: 15px;
}
}
.collapsible-content+& {
margin-top: -1px;
}
+.collapsible-content .collapsible-content__inner {
@include baseExtraSmallFontStack;
border: 0px solid $colorBorder;
border-top: 0;
padding: 15px 0px 10px 0px;
@include media-query($medium-up) {
@include baseSmallFontStack;
font-size: 13px;
line-height: 1.5;
}
@include media-query($small) {
font-size: 12px;
line-height: 1.5;
}
}
+.collapsible-content--expanded {
margin-bottom: $gutter;
&:last-child {
margin-bottom: -1px;
}
}
}
.collapsible-trigger-btn--borders-top {
border-top: 1px solid $colorBorder;
}

<button type="button" class="label collapsible-trigger collapsible-trigger-btn collapsible-trigger-btn--borders collapsible--auto-height" aria-controls="content" aria-expanded="true">
TITLE 2 <span class="collapsible-trigger__icon collapsible-trigger__icon--open" role="presentation">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewBox="0 0 28 16">
<path d="M1.57 1.59l12.76 12.77L27.1 1.59" stroke-width="2" stroke="#000" fill="none" fill-rule="evenodd"></path>
</svg>
</span>
</button>
<div id="content2" class="collapsible-content collapsible-content--all is-open" style="height: auto;">
<div class="collapsible-content__inner rte">
hello 2
</div>
</div>


<button type="button" class="label collapsible-trigger collapsible-trigger-btn collapsible-trigger-btn--borders" aria-controls="content" aria-expanded="true">
TITLE 3 <span class="collapsible-trigger__icon collapsible-trigger__icon--open" role="presentation">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewBox="0 0 28 16">
<path d="M1.57 1.59l12.76 12.77L27.1 1.59" stroke-width="2" stroke="#000" fill="none" fill-rule="evenodd"></path>
</svg>
</span>
</button>
<div id="content3" class="collapsible-content collapsible-content--all is-open" style="height: auto;">
<div class="collapsible-content__inner rte">
hello 3
</div>
</div>

你们中有人可以伸出援助之手吗？将不胜感激，谢谢！

Answer 1

在我看来，你有很多代码可以缩小。但你也可以只提取以下jQuery函数的核心思想。

如果您有任何问题或问题，可以写一个简短的评论。

$(function() {
// you can also use the whole item as a trigger with this: $('.accordion .accordion-item')
$('.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 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>

没有accordion-item元素的解决方案

这是您评论中问题的解决方案。我不喜欢这个，因为它对我来说太没有结构了。但这是你的决定。

我希望我能帮助你：

$(function() {
$('.accordion .accordion-title').on('click', toggleAccordion);
function toggleAccordion(event) {
var target = $(event.target)
var content = target.next('.accordion-content');
content.parent('.accordion').find('.accordion-content').not(content).removeClass('is-open');
target.toggleClass('is-open');
content.toggleClass('is-open');
}

});

.accordion .accordion-title {
position: relative;
padding: 15px;
cursor: pointer;
}
.accordion .accordion-title:not(:first-child) {
border-top: 1px solid #000;
}
.accordion .accordion-content {
display: none;
padding: 0 15px 15px;
}
.accordion .accordion-content.is-open {
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-title.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-title">
TITLE 1
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 1
</div>
<div class="accordion-title">
TITLE 2
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 2
</div>
<div class="accordion-title">
TITLE 3
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 3
</div>
</div>