Bootstrap手风琴在选择另一个后不会崩溃 [英] Bootstrap accordion not collapsing after another is selected

问题描述

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

Anyone, please help! I facing a problem while using jquery on bootstrap. It seems like an accordion is not working correctly, bootstrap accordion not collapsing after another is selected.

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

But when it comes not performing well if there are few cards for click. And previous open card is not close even selected other card to open. There's something happen: If continue click for open each card, the previous open card will still showing - and not + and it's showing content which is not what I want. Can anyone help me to have a look at the code and tell anything that I can fix the problem or there's better code? thanks!

我的布局:

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

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

I will thankful for anyone that willing to help me on this cuz I'm super new on coding, thanks!

更新:

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

I just solved the issue by my own, hope this can help anyone facing same issue like me:

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

推荐答案

实际上，您也可以使用引导程序来实现此功能.您需要在所有手风琴的父项中添加一个ID.在我的示例中，我使用了 id ="accordionGroup" ，并且在每个手风琴上都在具有class ="collapse"的div上添加了 data-parent =#accordionGroup" .希望这能解决您的问题.对于加号/减号图标，无需添加jQuery，您可以使用CSS做到这一点. 查看此codepen示例，请单击此处

actually you can achieve this functionality with bootstrap as well. you need to add one id in the parent of all accordions. In my example I have used id="accordionGroup" and on each accordion add data-parent="#accordionGroup" on the div that has class="collapse". Hope this will solve your problem. And for plus/minus icon don't need to add jQuery, you can do that with 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>

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

这篇关于Bootstrap手风琴在选择另一个后不会崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！