无法一次只展开一个折叠

Question

在我的页面中，我使用 11 bootstrap 3 折叠，如果我点击第二次折叠，我只需要展开一个，第一个应该关闭，第二个应该展开。

但在我的例子中，两个折叠都展开了。

我尝试添加 role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"

但没有任何效果

我用了HTML-attributes方法做的

HTML

<div id="myGroup" class="container">
            <h1>Select Category</h1>
            <div class="panel">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12 ">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseone" aria-expanded="false" aria-controls="collapseone"><i class="la la-motorcycle pull-left"></i><b>Vehicle</b></div>
                    <div id="collapseone" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Car</a>
                        <a href="#" class="list-group-item">Bus, Van, Truck</a>
                        <a href="#" class="list-group-item">Industrial Vehicle</a>
                        <a href="#" class="list-group-item">Motorcycles</a>
                        <a href="#" class="list-group-item">Bicycles</a>
                        <a href="#" class="list-group-item">Spare Parts</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo"><i class="la la-mobile-phone pull-left"></i><b>Mobile</b></div>
                    <div id="collapsetwo" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Mobiles</a>
                        <a href="#" class="list-group-item">Tablets</a>
                        <a href="#" class="list-group-item">Ipads</a>
                        <a href="#" class="list-group-item">Accessories</a>
                    </div>
                </div>
                <div class="clearfix visible-sm"></div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsethree" aria-expanded="false" aria-controls="collapsethree"><i class="la la-money pull-left"></i><b>Notes & Coin</b></div>
                    <div id="collapsethree" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Notes</a>
                        <a href="#" class="list-group-item">Coins</a>
                    </div>
                </div> 
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefour" aria-expanded="false" aria-controls="collapsefour"><i class="la la-lightbulb-o pull-left"></i><b>Electronics</b></div>
                    <div id="collapsefour" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Computer & Laptops</a>
                        <a href="#" class="list-group-item">TVs, Audio and Video</a>
                        <a href="#" class="list-group-item">Computer Accessories</a>
                        <a href="#" class="list-group-item">ACs</a>
                        <a href="#" class="list-group-item">Washing Machines</a>
                        <a href="#" class="list-group-item">Fridge</a>
                        <a href="#" class="list-group-item">Camera and Lens</a>
                        <a href="#" class="list-group-item">Kitchen Accessories</a>
                        <a href="#" class="list-group-item">Games and Entertainment</a>
                    </div>
                </div>
                <div class="clearfix visible-sm"></div>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefive" aria-expanded="false" aria-controls="collapsefive"><i class="la la-building-o pull-left"></i><b>Real Estate</b></div>
                    <div id="collapsefive" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">For Sale</a>
                        <a href="#" class="list-group-item">For Rent</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"><i class="la la-user-secret pull-left"></i><b>Fashion</b></div>
                    <div id="collapsesix" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Men</a>
                        <a href="#" class="list-group-item">Women</a>
                        <a href="#" class="list-group-item">Kids</a>
                    </div>
                </div>
                <div class="clearfix visible-sm"></div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseseven" aria-expanded="false" aria-controls="collapseseven"><i class="la la-wrench pull-left"></i><b>Service</b></div>
                    <div id="collapseseven" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Driver and Taxi</a>
                        <a href="#" class="list-group-item">Education and Classes</a>
                        <a href="#" class="list-group-item">Electonics and Computer</a>
                        <a href="#" class="list-group-item">Health and Beauty</a>
                        <a href="#" class="list-group-item">Gym and Fitness</a>
                        <a href="#" class="list-group-item">Sports and Equipment</a>
                        <a href="#" class="list-group-item">Other Services</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseeight" aria-expanded="false" aria-controls="collapseeight"><i class="la la-paw pull-left"></i><b>Pet's</b></div>
                    <div id="collapseeight" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Dogs</a>
                        <a href="#" class="list-group-item">Cats</a>
                        <a href="#" class="list-group-item">Fishes and Aquarium</a>
                        <a href="#" class="list-group-item">Food & Accessories</a>
                        <a href="#" class="list-group-item">Other Pets</a>
                    </div>
                </div>
                </div>
            <div class="row">
                <div class="clearfix visible-sm"></div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsenine" aria-expanded="false" aria-controls="collapsenine"><i class="la la-book pull-left"></i><b>Education</b></div>
                    <div id="collapsenine" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Books</a>
                        <a href="#" class="list-group-item">Online Tutorials</a>
                        <a href="#" class="list-group-item">Tutions</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseten" aria-expanded="false" aria-controls="collapseten"><i class="la la-venus-mars pull-left"></i><b>Matrimony</b></div>
                    <div id="collapseten" class="panel-collapse collapse">
                    <a href="#" class="list-group-item">Male</a>
                    <a href="#" class="list-group-item">Female</a>
                    </div>
                </div>
                <div class="clearfix visible-sm"></div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseelven" aria-expanded="false" aria-controls="collapseelven"><i class="la la-briefcase pull-left"></i><b>Jobs</b></div>
                    <div id="collapseelven" class="panel-collapse collapse">
                    <a href="#" class="list-group-item">Data Entry & Back Office</a>
                    <a href="#" class="list-group-item">BPO and Telecaller</a>
                    <a href="#" class="list-group-item">Sales and Marketing</a>
                    <a href="#" class="list-group-item">Operator and Technician</a>
                    <a href="#" class="list-group-item">Cook</a>
                    <a href="#" class="list-group-item">Driver</a>
                    <a href="#" class="list-group-item">Hotel and Travel Execute</a>
                    <a href="#" class="list-group-item">IT Engineer and Developer</a>
                    <a href="#" class="list-group-item">Design</a>
                    <a href="#" class="list-group-item">Office Assistant</a>
                    <a href="#" class="list-group-item">Reception and Front Office</a>
                    <a href="#" class="list-group-item">Delivery and Collection</a>
                    <a href="#" class="list-group-item">Accountant</a>
                    <a href="#" class="list-group-item">Teacher</a>
                    <a href="#" class="list-group-item">Other Jobs</a>
                    </div>
                </div>
                </div>
            </div>
        </div>

Here is fiddle what i tried

Answer 1

我建议使用 JavaScript 来切换它们。我在这里所做的：将 toggle class 添加到您的块 div，它会在每次打开切换块时获得一个 JavaScript 收听器来折叠所有其他块。

$(".collapse.in").collapse('hide'); 会找到所有需要折叠的方块，然后折叠它们。

我在一个效率较低的解决方案中留下了注释：$(this).parent().parent().parent()... 因为我希望它向您展示如何导航所有包含的 div。

if 语句：if ( !$(this).find(".panel-collapse").hasClass('in') ) 可防止您在已打开的块内单击时折叠。

$( function() {
  $('.toggle').click(function() {
      if ( !$(this).find(".panel-collapse").hasClass('in') ) {
  $(".collapse.in").collapse('hide');
  //$(this).parent().parent().parent().find('.collapse.in').collapse('hide');
      }
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="myGroup" class="container">
            <h1>Select Category</h1>
            <div class="panel">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12 toggle">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseone" aria-expanded="false" aria-controls="collapseone"><i class="la la-motorcycle pull-left"></i><b>Vehicle</b></div>
                    <div id="collapseone" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Car</a>
                        <a href="#" class="list-group-item">Bus, Van, Truck</a>
                        <a href="#" class="list-group-item">Industrial Vehicle</a>
                        <a href="#" class="list-group-item">Motorcycles</a>
                        <a href="#" class="list-group-item">Bicycles</a>
                        <a href="#" class="list-group-item">Spare Parts</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 toggle">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo"><i class="la la-mobile-phone pull-left"></i><b>Mobile</b></div>
                    <div id="collapsetwo" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Mobiles</a>
                        <a href="#" class="list-group-item">Tablets</a>
                        <a href="#" class="list-group-item">Ipads</a>
                        <a href="#" class="list-group-item">Accessories</a>
                    </div>
                </div>
                <div class="clearfix visible-sm"></div>
                <div class="col-md-3 col-sm-6 col-xs-12 toggle">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsethree" aria-expanded="false" aria-controls="collapsethree"><i class="la la-money pull-left"></i><b>Notes & Coin</b></div>
                    <div id="collapsethree" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Notes</a>
                        <a href="#" class="list-group-item">Coins</a>
                    </div>
                </div> 
                <div class="col-md-3 col-sm-6 col-xs-12 toggle">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefour" aria-expanded="false" aria-controls="collapsefour"><i class="la la-lightbulb-o pull-left"></i><b>Electronics</b></div>
                    <div id="collapsefour" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Computer & Laptops</a>
                        <a href="#" class="list-group-item">TVs, Audio and Video</a>
                        <a href="#" class="list-group-item">Computer Accessories</a>
                        <a href="#" class="list-group-item">ACs</a>
                        <a href="#" class="list-group-item">Washing Machines</a>
                        <a href="#" class="list-group-item">Fridge</a>
                        <a href="#" class="list-group-item">Camera and Lens</a>
                        <a href="#" class="list-group-item">Kitchen Accessories</a>
                        <a href="#" class="list-group-item">Games and Entertainment</a>
                    </div>
                </div>
                <div class="clearfix visible-sm"></div>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12 toggle">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefive" aria-expanded="false" aria-controls="collapsefive"><i class="la la-building-o pull-left"></i><b>Real Estate</b></div>
                    <div id="collapsefive" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">For Sale</a>
                        <a href="#" class="list-group-item">For Rent</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 toggle">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"><i class="la la-user-secret pull-left"></i><b>Fashion</b></div>
                    <div id="collapsesix" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Men</a>
                        <a href="#" class="list-group-item">Women</a>
                        <a href="#" class="list-group-item">Kids</a>
                    </div>
                </div>
                <div class="clearfix visible-sm"></div>
                <div class="col-md-3 col-sm-6 col-xs-12 toggle">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseseven" aria-expanded="false" aria-controls="collapseseven"><i class="la la-wrench pull-left"></i><b>Service</b></div>
                    <div id="collapseseven" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Driver and Taxi</a>
                        <a href="#" class="list-group-item">Education and Classes</a>
                        <a href="#" class="list-group-item">Electonics and Computer</a>
                        <a href="#" class="list-group-item">Health and Beauty</a>
                        <a href="#" class="list-group-item">Gym and Fitness</a>
                        <a href="#" class="list-group-item">Sports and Equipment</a>
                        <a href="#" class="list-group-item">Other Services</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 toggle">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseeight" aria-expanded="false" aria-controls="collapseeight"><i class="la la-paw pull-left"></i><b>Pet's</b></div>
                    <div id="collapseeight" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Dogs</a>
                        <a href="#" class="list-group-item">Cats</a>
                        <a href="#" class="list-group-item">Fishes and Aquarium</a>
                        <a href="#" class="list-group-item">Food & Accessories</a>
                        <a href="#" class="list-group-item">Other Pets</a>
                    </div>
                </div>
                </div>
            <div class="row">
                <div class="clearfix visible-sm"></div>
                <div class="col-md-3 col-sm-6 col-xs-12 toggle">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsenine" aria-expanded="false" aria-controls="collapsenine"><i class="la la-book pull-left"></i><b>Education</b></div>
                    <div id="collapsenine" class="panel-collapse collapse">
                        <a href="#" class="list-group-item">Books</a>
                        <a href="#" class="list-group-item">Online Tutorials</a>
                        <a href="#" class="list-group-item">Tutions</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 toggle">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseten" aria-expanded="false" aria-controls="collapseten"><i class="la la-venus-mars pull-left"></i><b>Matrimony</b></div>
                    <div id="collapseten" class="panel-collapse collapse">
                    <a href="#" class="list-group-item">Male</a>
                    <a href="#" class="list-group-item">Female</a>
                    </div>
                </div>
                <div class="clearfix visible-sm"></div>
                <div class="col-md-3 col-sm-6 col-xs-12 toggle">
                    <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseelven" aria-expanded="false" aria-controls="collapseelven"><i class="la la-briefcase pull-left"></i><b>Jobs</b></div>
                    <div id="collapseelven" class="panel-collapse collapse">
                    <a href="#" class="list-group-item">Data Entry & Back Office</a>
                    <a href="#" class="list-group-item">BPO and Telecaller</a>
                    <a href="#" class="list-group-item">Sales and Marketing</a>
                    <a href="#" class="list-group-item">Operator and Technician</a>
                    <a href="#" class="list-group-item">Cook</a>
                    <a href="#" class="list-group-item">Driver</a>
                    <a href="#" class="list-group-item">Hotel and Travel Execute</a>
                    <a href="#" class="list-group-item">IT Engineer and Developer</a>
                    <a href="#" class="list-group-item">Design</a>
                    <a href="#" class="list-group-item">Office Assistant</a>
                    <a href="#" class="list-group-item">Reception and Front Office</a>
                    <a href="#" class="list-group-item">Delivery and Collection</a>
                    <a href="#" class="list-group-item">Accountant</a>
                    <a href="#" class="list-group-item">Teacher</a>
                    <a href="#" class="list-group-item">Other Jobs</a>
                    </div>
                </div>
                </div>
            </div>
        </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

希望这个解决方案能满足您的需求！如果您还有其他问题，请告诉我。

Answer 2

UPD.

您指定了一个不完整的 URL 到 bootstrap.min.js 并且脚本没有连接到您的 JSFiddle。因此，您需要更正 Bootstrap 脚本的 URL。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="myGroup" class="container">
    <h1>Select Category</h1>
    <div class="panel">
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12 ">
            <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseone" aria-expanded="false" aria-controls="collapseone"><i class="la la-motorcycle pull-left"></i><b>Vehicle</b></div>
            <div id="collapseone" class="panel-collapse collapse">
                <a href="#" class="list-group-item">Car</a>
                <a href="#" class="list-group-item">Bus, Van, Truck</a>
                <a href="#" class="list-group-item">Industrial Vehicle</a>
                <a href="#" class="list-group-item">Motorcycles</a>
                <a href="#" class="list-group-item">Bicycles</a>
                <a href="#" class="list-group-item">Spare Parts</a>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo"><i class="la la-mobile-phone pull-left"></i><b>Mobile</b></div>
            <div id="collapsetwo" class="panel-collapse collapse">
                <a href="#" class="list-group-item">Mobiles</a>
                <a href="#" class="list-group-item">Tablets</a>
                <a href="#" class="list-group-item">Ipads</a>
                <a href="#" class="list-group-item">Accessories</a>
            </div>
        </div>
        <div class="clearfix visible-sm"></div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsethree" aria-expanded="false" aria-controls="collapsethree"><i class="la la-money pull-left"></i><b>Notes & Coin</b></div>
            <div id="collapsethree" class="panel-collapse collapse">
                <a href="#" class="list-group-item">Notes</a>
                <a href="#" class="list-group-item">Coins</a>
            </div>
        </div> 
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefour" aria-expanded="false" aria-controls="collapsefour"><i class="la la-lightbulb-o pull-left"></i><b>Electronics</b></div>
            <div id="collapsefour" class="panel-collapse collapse">
                <a href="#" class="list-group-item">Computer & Laptops</a>
                <a href="#" class="list-group-item">TVs, Audio and Video</a>
                <a href="#" class="list-group-item">Computer Accessories</a>
                <a href="#" class="list-group-item">ACs</a>
                <a href="#" class="list-group-item">Washing Machines</a>
                <a href="#" class="list-group-item">Fridge</a>
                <a href="#" class="list-group-item">Camera and Lens</a>
                <a href="#" class="list-group-item">Kitchen Accessories</a>
                <a href="#" class="list-group-item">Games and Entertainment</a>
            </div>
        </div>
        <div class="clearfix visible-sm"></div>
    </div>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefive" aria-expanded="false" aria-controls="collapsefive"><i class="la la-building-o pull-left"></i><b>Real Estate</b></div>
            <div id="collapsefive" class="panel-collapse collapse">
                <a href="#" class="list-group-item">For Sale</a>
                <a href="#" class="list-group-item">For Rent</a>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"><i class="la la-user-secret pull-left"></i><b>Fashion</b></div>
            <div id="collapsesix" class="panel-collapse collapse">
                <a href="#" class="list-group-item">Men</a>
                <a href="#" class="list-group-item">Women</a>
                <a href="#" class="list-group-item">Kids</a>
            </div>
        </div>
        <div class="clearfix visible-sm"></div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseseven" aria-expanded="false" aria-controls="collapseseven"><i class="la la-wrench pull-left"></i><b>Service</b></div>
            <div id="collapseseven" class="panel-collapse collapse">
                <a href="#" class="list-group-item">Driver and Taxi</a>
                <a href="#" class="list-group-item">Education and Classes</a>
                <a href="#" class="list-group-item">Electonics and Computer</a>
                <a href="#" class="list-group-item">Health and Beauty</a>
                <a href="#" class="list-group-item">Gym and Fitness</a>
                <a href="#" class="list-group-item">Sports and Equipment</a>
                <a href="#" class="list-group-item">Other Services</a>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseeight" aria-expanded="false" aria-controls="collapseeight"><i class="la la-paw pull-left"></i><b>Pet's</b></div>
            <div id="collapseeight" class="panel-collapse collapse">
                <a href="#" class="list-group-item">Dogs</a>
                <a href="#" class="list-group-item">Cats</a>
                <a href="#" class="list-group-item">Fishes and Aquarium</a>
                <a href="#" class="list-group-item">Food & Accessories</a>
                <a href="#" class="list-group-item">Other Pets</a>
            </div>
        </div>
        </div>
    <div class="row">
        <div class="clearfix visible-sm"></div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsenine" aria-expanded="false" aria-controls="collapsenine"><i class="la la-book pull-left"></i><b>Education</b></div>
            <div id="collapsenine" class="panel-collapse collapse">
                <a href="#" class="list-group-item">Books</a>
                <a href="#" class="list-group-item">Online Tutorials</a>
                <a href="#" class="list-group-item">Tutions</a>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseten" aria-expanded="false" aria-controls="collapseten"><i class="la la-venus-mars pull-left"></i><b>Matrimony</b></div>
            <div id="collapseten" class="panel-collapse collapse">
            <a href="#" class="list-group-item">Male</a>
            <a href="#" class="list-group-item">Female</a>
            </div>
        </div>
        <div class="clearfix visible-sm"></div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseelven" aria-expanded="false" aria-controls="collapseelven"><i class="la la-briefcase pull-left"></i><b>Jobs</b></div>
            <div id="collapseelven" class="panel-collapse collapse">
            <a href="#" class="list-group-item">Data Entry & Back Office</a>
            <a href="#" class="list-group-item">BPO and Telecaller</a>
            <a href="#" class="list-group-item">Sales and Marketing</a>
            <a href="#" class="list-group-item">Operator and Technician</a>
            <a href="#" class="list-group-item">Cook</a>
            <a href="#" class="list-group-item">Driver</a>
            <a href="#" class="list-group-item">Hotel and Travel Execute</a>
            <a href="#" class="list-group-item">IT Engineer and Developer</a>
            <a href="#" class="list-group-item">Design</a>
            <a href="#" class="list-group-item">Office Assistant</a>
            <a href="#" class="list-group-item">Reception and Front Office</a>
            <a href="#" class="list-group-item">Delivery and Collection</a>
            <a href="#" class="list-group-item">Accountant</a>
            <a href="#" class="list-group-item">Teacher</a>
            <a href="#" class="list-group-item">Other Jobs</a>
            </div>
        </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

手风琴的折叠部分必须是 .panel 块的子块。因此，您需要更改布局或编写自己的脚本，而不是使用 HTML 属性。

无法一次只展开一个折叠

unable to make only one collapse expand at a time

html

collapse

twitter-bootstrap-3