打开另一个具有不同父级的手风琴时关闭手风琴

Question

我有以下手风琴设置：https://jsfiddle.net/n4tmjaqd/1/

如何调整该功能，以便在打开选项卡 2 或 3 时关闭选项卡 1（反之亦然）？选项卡 1 与选项卡 2 和 3 具有不同的父级，尽管具有相同的 class。甚至可以让具有相同 class 的不同父级具有这样的功能，还是我需要调整 say 选项卡 1 的父级 class 名称并从那里创建一个新功能？非常感谢指导。

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

Answer 1

只需在点击事件处理程序的开头添加这个

$('.accordion-item').not($(event.target).parent()).removeClass('is-open');

这是一个工作片段 (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>

打开另一个具有不同父级的手风琴时关闭手风琴

Close accordion upon opening another accordion with different parent

html

javascript

css

function

accordion