打开点击的标签，然后关闭其余的标签 [英] Open clicked tab and close the rest
本文介绍了打开点击的标签，然后关闭其余的标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用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>
标题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--全部打开 style = height：auto;>
< div class = collapsible-content__inner rte>
你好1
< / div>
< / div>
和CSS：
/ * =================可折叠触发器=============== * /
.collapsible-trigger-btn {
text-align：left！important;
@include baseTextCenter;
@include accentFontStack;
@include accentFontSmallSize;
padding-left：0px！important;
显示：块；
宽度：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！重要
padding-bottom：0px！important;
font-size：13px;
字母间距：正常；
字体粗细：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;
边界：0像素纯色$ colorBorder;
border-top：0;
padding：15px 0px 10px 0px;
@include media-query（$ medium-up）{
@include baseSmallFontStack;
font-size：13px;
行高：1.5；
}
@include media-query（$ small）{
font-size：12px;
行高：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>
标题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--全部打开 style = height：auto;>
< div class = collapsible-content__inner rte>
你好2
< / div>
< / div>
< button type = button class = label collapsible-trigger collapsible-trigger-btn collapsible-trigger-btn- -borders aria-controls = content aria-expanded = true>
标题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--全部打开 style = height：auto;>
< div class = collapsible-content__inner rte>
你好3
< / div>
< / div>
你们中的任何一个都可以伸出援手吗？
解决方案
在我看来，您有很多可以简化的代码。但是您也可以仅提取以下jQuery函数的核心思想。
如果您有任何疑问或问题，可以写一个简短的评论。
$（function（）{//您还可以使用以下命令将整个项目用作触发器：$（'。accordion .accordion-item'）$（' .accordion .accordion-title'）。on（'click'，toggleAccordion）;函数toggleAccordion（event）{var target = $（event.target）.closest（'。accordion-item'）; target.parent（'。手风琴'）.find（'。accordion-item'）。not（target）.removeClass（'is-open'）; target.toggleClass（'is-open'）;}}）;
.accordion .accordion-item {border-bottom：1px solid＃000;}。手风琴.accordion-title {位置：相对；填充：15px;光标：指针；}。accordion .accordion-content {显示：无； padding：0 15px 15px;}。accordion .accordion-item.is-open .accordion-content {display：block;}。accordion .arrow {position：absolute;显示：inline-block;填充：5px；顶部：13px；右：15px； background-color：继承；边框：实心＃000；边框宽度：0 2px 2px 0;变换：rotate（45deg）; -webkit-transform：rotation（45deg）;}。accordion .accordion-item.is-open .arrow {顶部：20px;变换：rotate（-135deg）; -webkit-transform：rotation（-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>标题1< span class = arrow>< / span> < / div> < div class = accordion-content>内容1< / div> < / div> < div class = accordion-item> < div class = accordion-title>标题2< span class = arrow>< / span> < / div> < div class = accordion-content>内容2< / div> < / div> < div class = accordion-item> < div class = accordion-title>标题3< span class = arrow>< / span> < / div> < div class = accordion-content>内容3< / div> < / div>< / div>
没有手风琴项目元素
我希望我可以为您提供帮助：
$（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;填充：15px;光标：指针；}。accordion .accordion-title：not（：first-child）{border-top：1px solid＃000;}。accordion .accordion-content {display：none; padding：0 15px 15px;}。手风琴.accordion-content.is-open {display：block;}。accordion .arrow {position：absolute;显示：inline-block;填充：5px；顶部：13px；右：15px； background-color：继承；边框：实心＃000；边框宽度：0 2px 2px 0;变换：rotate（45deg）; -webkit-transform：rotation（45deg）;}。accordion .accordion-title.is-open .arrow {顶部：20px;变换：rotate（-135deg）; -webkit-transform：rotation（-135deg）;}
< script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script>< div class = accordion> < div class = accordion-title>标题1< span class = arrow>< / span> < / div> < div class = accordion-content>内容1< / div> < div class = accordion-title>标题2< span class = arrow>< / span> < / div> < div class = accordion-content>内容2< / div> < div class = accordion-title>标题3< span class = arrow>< / span> < / div> < div class = accordion-content>内容3< / div>< / div>
I'm using JQuery to adjust some accordions. I have the accordion logic ready, but can't get the desired result. I would like that when a tab is clicked, that particular tab opens and the others close if they are open. And if an open tab is clicked, that particular tab closes too. So at any given time, only one tab should be open, but all tabs can be closed. Here is the fiddle 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");
});
});
Here is the 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>
And the 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>
Could any of you please lend a helping hand? Would be much appreciated, thank you!
解决方案
In my opinion you have much of code which could be minified. But you can also just extract the core ideas of the following jQuery function.
If you have any questions or problems, you can write a short comment.
$(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>
Solution without an accordion-item element
This is a solution to your problem from your comment. I do not prefer this one, because it would be too unstructured for me. But it's your decision.
I hope that I can help you with this:
$(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>
这篇关于打开点击的标签，然后关闭其余的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
