Question

我正在使用JQuery调整一些手风琴。我已经准备好手风琴逻辑，但是无法获得理想的结果。我想单击一个选项卡时，将打开该特定选项卡，如果其他选项卡处于打开状态，则将其关闭。而且，如果单击一个打开的选项卡，则该特定的选项卡也会关闭。因此，在任何给定时间，只应打开一个选项卡，但所有选项卡都可以关闭。这是小提琴https://jsfiddle.net/4d5mjgza/

这是HTML：

 $(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");
    });
});

和CSS：

<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>

你们中的任何一个都可以伸出援手吗？非常感谢，谢谢！

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>

打开点击的标签，然后关闭其余的标签

1 个答案: