调整手风琴图标

Question

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

我想更改选项卡的图标，使它们成为加号和减号图标。关闭时加号，打开时减号。如何调整 CSS 以进行此更改？甚至可以仅使用 CSS 完成还是必须更改功能？非常感谢任何指导。谢谢。

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

});

CSS：

.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);
}

HTML:

        <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

1. 点击按钮时平滑过渡。
2. 您不必为此使用多个div，您仍然可以简单我刚刚保留了您的HTML代码，您可以考虑在将来对其进行优化。

这是它的外观：

var acc = document.getElementsByClassName("accordion-title");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.accordion-title {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion-title:hover {
  background-color: #ccc;
}

.accordion-title:after {
  content: '\002B';
  color: red;
  /* change the color you want here */
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.accordion-content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-title">TITLE 1</button>
    <div class="accordion-content">
      CONTENT 1
    </div>
  </div>
</div>

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-title">TITLE 2</button>
    <div class="accordion-content">
      CONTENT 2
    </div>
  </div>

  <div class="accordion-item">
    <button class="accordion-title">TITLE 3</button>
    <div class="accordion-content">
      CONTENT 3
    </div>
  </div>
</div>