Bootstrap手风琴在选择另一个后没有崩溃

Question

任何人，请帮助！我在引导程序上使用jQuery时遇到问题。似乎手风琴无法正常工作，自举手风琴在选择另一个后不会崩溃。

但是如果点击的卡很少，则效果不佳。并且以前打开的卡甚至没有选择其他要打开的卡也不会关闭。发生了什么：如果继续单击以打开每张卡，则先前打开的卡仍将显示-而不是+，并且显示的内容不是我想要的。谁能帮助我看看代码，并告诉我可以解决问题的任何信息，或者有更好的代码？谢谢！

我的布局：

<div class="container">
  <div id="accordion">
    <div class="card info-card' . $i . '" data-toggle="collapse"
         href="#collapse' . $i . '">
      <div class="card-header">
        <h4 style="margin:0;"><strong>' . $title . '</strong>
          <div class="icon">
            <img class="plus-icon"
                 src="'.get_stylesheet_directory_uri().'/img/plus.png"
                 alt="plus-icon"/>
          </div>
          <img class="minus-icon" style="display:none"
               src="'.get_stylesheet_directory_uri().'/img/minus.png"
               alt="minus-icon"/></span>
        </h4>
      </div>
      <div id="collapse' . $i . '" class="collapse" data-parent="#accordion">
        <a class="card-link">
          <span class="icon"></span>
        </a>
        <div class="card-body">
          '. $content .'
        </div>
      </div>
    </div>
  </div>
</div>

我的脚本：

$(document).ready(function () {
  $('.card').on('click', function () {
    $('.minus-icon').hide();
    $('.plus-icon').show();
    $(this).find('.card-header').css('background-color', '#ececec37');
    if ($(this).find('.collapse').hasClass('show')) {
      $(this).find('.card-header').css('background-color', '#ececec37');
      $(this).find('.plus-icon').show();
      $(this).find('.minus-icon').hide();
    } else {
      $(this).find('.card-header').css('background-color', 'white');
      $(this).find('.plus-icon').hide();
      $(this).find('.minus-icon').show();
    }
  });
});

感谢任何愿意帮助我的人，我在编码方面是个超级新手，谢谢！

更新：

我只是自己解决了这个问题，希望这可以帮助像我一样面临同样问题的任何人：

        $('.card').on('click', function(){
    $('.minus-icon').hide();
    $('.plus-icon').show();
    $(this).find('.card-header').css("background-color","#ececec37");
            if($(this).find('.collapse').hasClass('show')){
      $(this).find('.card-header').css("background-color","#ececec37");
      $(this).find('.plus-icon').show();
      $(this).find('.minus-icon').hide();
      $(this).find('.card-body').hide();

            }else{
      if($('.collapse')!= $(this).find('.collapse')){
      $('.collapse').removeClass('show');
      $('.card-header').css("background-color","#ececec37");

    }else{
      $('.collapse').hasClass('show');
      $(this).find('.card-header').css("background-color","#ececec37");
    }

    $(this).find('.card-header').css("background-color","white");
      $(this).find('.plus-icon').hide();
      $(this).find('.minus-icon').show();
      $(this).find('.card-body').show();
            }

Answer 1

实际上，您也可以使用引导程序来实现此功能。您需要在所有手风琴的父项中添加一个ID。在我的示例中，我使用了id =“ accordionGroup”，并在每个具有class =“ collapse”的div上添加了[[data-parent =“＃accordionGroup”]。希望这能解决您的问题。对于加号/减号图标，无需添加jQuery，您可以使用CSS做到这一点。 check this codepen example, click here

html：

<div class="container">
   <h1>Sample accordion</h1>
   <div id="accordionGroup">
      <button type="button" class="btn btn-primary btn-block mb-2 text-left" data-toggle="collapse" data-target="#demo">Accordion 1</button>
      <div id="demo" class="collapse" data-parent="#accordionGroup">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <button type="button" class="btn btn-primary btn-block text-left" data-toggle="collapse" data-target="#demo1">Accordion 2</button>
      <div id="demo1" class="collapse" data-parent="#accordionGroup">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
   </div>
</div>