选择另一个后引导手风琴不会折叠

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" 并在每个手风琴上添加 data-parent="#accordionGroup" 到具有 class="collapse" 的 div 上。希望这能解决您的问题。而对于加号/减号图标不需要添加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>