手风琴不能在加号和减号之间正确切换

Question

我网站的某个页面上有一个小手风琴，我似乎无法在加号和减号之间正确切换。如果我打开和关闭同一个手风琴项目，它会很好地切换，但问题是当我在另一个项目处于活动状态时单击另一个项目时，它会留下减号。

<div class="accordion">
    <div class="accordion-item item1 verde">
        <a href="#" class="heading"><div class="title"><i class="plusminus fas fa-plus" aria-hidden="true"></i>item1</div></a>

        <div class="content"><p>content for item 1</p></div>
    </div>

    <div class="accordion-item item2 verde">
        <a href="#" class="heading"><div class="title"><i class="plusminus fas fa-plus" aria-hidden="true"></i>item2</div></a>

        <div class="content"><p>content for item 2</p></div>
    </div>
 </div>

$('.accordion-item .heading').on('click', function(e) {
            e.preventDefault();

            // Add the correct active class
            if($(this).closest('.accordion-item').hasClass('active')) {
                // Remove active classes
                $('.accordion-item').removeClass('active');

            } else {
                // Remove active classes
                $('.accordion-item').removeClass('active');

                // Add the active class
                $(this).closest('.accordion-item').addClass('active');
            }

            if($(this).closest('.accordion-item').hasClass('active')) {
                $(this).find(".plusminus").removeClass('fa-plus').addClass('fa-minus');
            } else {
                $(this).find(".plusminus").removeClass('fa-minus').addClass('fa-plus');
            }   

            // Show the content
            var $content = $(this).next();
            $content.slideToggle(100);
            $('.accordion-item .content').not($content).slideUp('fast');
        });

Answer 1

您只需要在活动开始时重置 fa-minus 和 fa-plus class。

将每个 plusminus class 更改为 fa-plus 并在您设置的事件处理程序结束时像您已经在做的那样。

$('.accordion-item .heading').on('click', function (e) {
      e.preventDefault();

      $(".plusminus").removeClass('fa-minus').addClass('fa-plus');

      // Add the correct active class
      if ($(this).closest('.accordion-item').hasClass('active')) {
        // Remove active classes
        $('.accordion-item').removeClass('active');

      } else {
        // Remove active classes
        $('.accordion-item').removeClass('active');

        // Add the active class
        $(this).closest('.accordion-item').addClass('active');
      }

      if ($(this).closest('.accordion-item').hasClass('active')) {
        $(this).find(".plusminus").removeClass('fa-plus').addClass('fa-minus');
      } else {
        $(this).find(".plusminus").removeClass('fa-minus').addClass('fa-plus');
      }

      // Show the content
      var $content = $(this).next();
      $content.slideToggle(100);
      $('.accordion-item .content').not($content).slideUp('fast');
    });

<div class="accordion">
    <div class="accordion-item item1 verde">
      <a href="#" class="heading">
        <div class="title"><i class="plusminus fas fa-plus" aria-hidden="true"></i>item1</div>
      </a>

      <div class="content">
        <p>content for item 1</p>
      </div>
    </div>

    <div class="accordion-item item2 verde">
      <a href="#" class="heading">
        <div class="title"><i class="plusminus fas fa-plus" aria-hidden="true"></i>item2</div>
      </a>

      <div class="content">
        <p>content for item 2</p>
      </div>
    </div>
  </div>

手风琴不能在加号和减号之间正确切换

Accordion doesn't toggle properly between plus and minus sign

html

accordion