手风琴关闭，但单击图标时除外

Question

我正在运行以下手风琴设置。除了这个小问题之外，其他所有程序都运行良好：一旦打开手风琴，就无法通过单击V形图标来关闭它。它会在手风琴上的其他任何位置关闭，但在人字形上不会关闭。知道为什么会发生这种情况，以及如何解决这个微小但容易出错的问题吗？任何指导表示赞赏。谢谢。

这里是小提琴：https://jsfiddle.net/oh823pxz/

$(function() {

  $('.accordion .accordion-title').on('click', toggleAccordion);

  function toggleAccordion(event) {
  
   $('.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: 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

尝试一下... z-index：-1;

.accordion .accordion-item.is-open .arrow {
    top: 20px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    z-index: -1;
}