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

将每个正负类都更改为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>

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

1 个答案: