不能一次只让一个坍塌扩大答案

【问题标题】：unable to make only one collapse expand at a time不能一次只让一个坍塌扩大
【发布时间】：2018-11-29 23:57:21
【问题描述】：

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

但在我的情况下，两个折叠都展开了。

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

但没有任何效果

followed all instruction given in Stack Overflow Answer

我使用 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

【问题讨论】：

标签： html twitter-bootstrap-3 collapse

【解决方案1】：

我建议使用 JavaScript 来根据需要切换它们。我在这里所做的：将 toggle 类添加到您的块 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>

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

【讨论】：

但是这里stackoverflow.com/questions/37753407/… 没有js也可以工作
我没有说你必须使用JS。我只是说我建议它，因为它更清晰，更有意义。您没有要求仅是属性的答案，您只是说那是您尝试过的，但没有用。
我有办法不用JS
@sanojlawrence 是的，我相信是这样，但我认为您的 html 的复杂结构仅适用于属性。要使属性起作用，结构必须更加直接和干净（你有很多包含的 div，里面的东西被折叠得很深）。

【解决方案2】：

更新。

您为 bootstrap.min.js 指定了一个不完整的 URL，并且脚本未连接到您的 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 属性。

【讨论】：

有没有办法不改变 HTML
我猜the neighboring answer 可以满足您的需求。