根据手风琴状态添加删除类

Question

我有需要根据手风琴状态（显示、隐藏）更改的手风琴按钮。点击事件我可以做到这一点，但我想将它绑定到手风琴的状态

我尝试在我编写的手风琴函数中添加一个事件处理程序，但我一定是做错了

var accordionBtn = $('.accordion-btn');
var bedAccordion = $('.accordion');

$(document).ready(function() {
  $(bedAccordion).on('show.bs.collapse', function() {
    $(this).find('i').removeClass('fa-plus');
    $(this).find('i').addClass('fa-minus');
    $('.collapse').collapse('hide');
  });

  $(bedAccordion).on('hide.bs.collapse', function() {
    $(this).find('i').removeClass('fa-minus');
    $(this).find('i').addClass('fa-plus');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="accordion">
  <button class="btn accordion-btn button--arrow-right" type="button" data-toggle="collapse" data-target="#bedAccordion1" aria-expanded="false" aria-controls="bedAccordion1"><i class="fas fa-plus"></i></button>
  <span class="title-3">Test</span>
  <div class="col collapse-content">
    <div class="collapse multi-collapse" id="bedAccordion1">
      <div class="border--left">
        <p><b>Test</b><sup>1</sup><br> Test
        </p>
        <p>test<br> test
        </p>
        <p><b>test</b><sup>1</sup><br> Test</p>
      </div>
    </div>
  </div>
</div>

我想将下面的这个事件绑定到上面的函数，这样更改就会在显示和隐藏折叠时发生

    $(accordionBtn).click(function () {
        $(this).toggleClass('accordion-btn--open');
        $(this).toggleClass('button--arrow-right');
    });
});

将按钮切换类绑定到手风琴的状态和上面的函数

Answer 1

您需要调用toggleButton 和call 方法来设置this 值。

更多关于Javascript call() & apply() vs bind()

var accordionBtn = $('.accordion-btn');
var bedAccordion = $('.accordion');

$(document).ready(function() {
  $(bedAccordion).on('show.bs.collapse', function(e) {
    toggleButton.call(this);
    $(this).find('.collapse').collapse('hide');
  });

  $(bedAccordion).on('hide.bs.collapse', function() {
    toggleButton.call(this);
  });
});

function toggleButton() {
  $(this).find('i').toggleClass('fa-plus').toggleClass('fa-minus');
  $(this).find('button').toggleClass('active');
}

button.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="accordion">
  <button class="btn accordion-btn button--arrow-right" type="button" data-toggle="collapse" data-target="#bedAccordion1" aria-expanded="false" aria-controls="bedAccordion1"><i class="fas fa-plus"></i></button>
  <span class="title-3">Test 1</span>
  <div class="col collapse-content">
    <div class="collapse multi-collapse" id="bedAccordion1">
      <div class="border--left">
        <p><b>Test</b><sup>1</sup><br> Test
        </p>
        <p>test<br> test
        </p>
        <p><b>test</b><sup>1</sup><br> Test</p>
      </div>
    </div>
  </div>
</div>

<div class="accordion">
  <button class="btn accordion-btn button--arrow-right" type="button" data-toggle="collapse" data-target="#bedAccordion2" aria-expanded="false" aria-controls="bedAccordion2"><i class="fas fa-plus"></i></button>
  <span class="title-3">Test 2</span>
  <div class="col collapse-content">
    <div class="collapse multi-collapse" id="bedAccordion2">
      <div class="border--left">
        <p><b>Test</b><sup>1</sup><br> Test
        </p>
        <p>test<br> test
        </p>
        <p><b>test</b><sup>1</sup><br> Test</p>
      </div>
    </div>
  </div>
</div>

Answer 2

为了一次只打开一个手风琴，您可以使用引导程序提供的parent 属性，您只需要为您的手风琴提供一个包装器元素。这也允许拥有多个手风琴组，因此您可以让一个手风琴活跃每组。

要更改图标，只需定义一个函数并将其作为事件回调传递，jQuery 将负责将this 绑定到当前元素。

var accordionBtn = $('.accordion-btn');
var bedAccordion = $('.accordion');

function toggleButton() {
  $(this).find('i').toggleClass('fa-plus').toggleClass('fa-minus');
}

$(document).ready(function() {
  bedAccordion.on('show.bs.collapse', toggleButton)
    .on('hide.bs.collapse', toggleButton);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Add wrapper element -->
<div id="accordion-container">
  <div class="accordion">
    <button class="btn accordion-btn button--arrow-right" type="button" data-toggle="collapse" data-target="#bedAccordion1" aria-expanded="false" aria-controls="bedAccordion1"><i class="fas fa-plus"></i></button>
    <span class="title-3">Test</span>
    <div class="col collapse-content">
      <div class="collapse multi-collapse" id="bedAccordion1" data-parent="#accordion-container">
        <div class="border--left">
          <p><b>Test</b><br>Test</p>
          <p><b>test</b><sup>1</sup><br> Test</p>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion">
    <button class="btn accordion-btn button--arrow-right" type="button" data-toggle="collapse" data-target="#bedAccordion2" data-parent="#accordion-container" aria-expanded="false" aria-controls="bedAccordion1"><i class="fas fa-plus"></i></button>
    <span class="title-3">Test</span>
    <div class="col collapse-content">
      <!-- Add the data-parent to indicate which group this accordion belongs to -->
      <div class="collapse multi-collapse" id="bedAccordion2" data-parent="#accordion-container">
        <div class="border--left">
          <p><b>Test</b><br> Test</p>
          <p><b>test</b><sup>2</sup><br> Test</p>
        </div>
      </div>
    </div>
  </div>
</div>