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

时间：2019-08-23 22:33:51

标签： jquery html css

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

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

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

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

2 个答案:

答案 0 :(得分：4)

您需要使用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>

答案 1 :(得分：1)

要一次只打开一个手风琴，可以使用bootstrap提供的parent属性，您只需要为手风琴提供一个wrapper元素即可。这也允许有多个手风琴组，因此每个组中可以有一个活动的手风琴 。

要更改图标，只需定义一个函数并将其作为事件的回调传递，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>

相关问题
最新问题