javascript - 打开另一个选项卡时关闭按钮和选项卡空间

Question

我有 3 个标签，我希望这些标签在打开其中 1 个时关闭。到目前为止，我有 JQuery 工作，当我打开选项卡 2 时，选项卡 1 的内容消失了。但是选项卡本身不会关闭，并且内容所在的空间也保持打开状态。

如何修复按钮也关闭的代码，同时消失空白？这是小提琴：https ://jsfiddle.net/rxfzdnoa/

下面是代码：

查询：

    $('.collapsible-trigger').on('click', function() {

      var x = $("button").attr("aria-expanded", "true")
      var x = $('.collapsible-content--all').hasClass('is-open');
      if (x) {
        $("button").removeAttr('true');
        $('.collapsible-content--all').removeClass('is-open');
        $(this).removeAttr('true', 400);
        $(this).next().toggleClass('is-open', 400);
      } else {
        console.log("x");
        $('.true').setAttr("true");
        $('.collapsible-content--all').showClass('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 is-open" aria-controls="TITLE1" aria-expanded="true">
    TITLE1
    <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="TITLE1" class="collapsible-content collapsible-content--all is-open" style="height: auto;">
    <div class="collapsible-content__inner rte">
      HELLO 1
    </div>
  </div>


  <button type="button" class="label collapsible-trigger collapsible-trigger-btn collapsible-trigger-btn--borders collapsible--auto-height is-open" aria-controls="TITLE2" aria-expanded="true">
    TITLE2
    <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="TITLE2" 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 collapsible--auto-height is-open" aria-controls="TITLE3" aria-expanded="true">
    TITLE3
    <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="TITLE3" class="collapsible-content collapsible-content--all is-open" style="height: auto;">
    <div class="collapsible-content__inner rte">
      HELLO 3
    </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;
}

请注意，我与此 HTML 相关联，因此无法选择更改结构。任何指导将不胜感激。谢谢你。

标签： javascriptjqueryfunctiontabsaccordion