无法一次只展开一次崩溃 [英] unable to make only one collapse expand at a time

问题描述

在我的页面中，我使用了11 bootstrap 3 collapse，如果我点击第二次崩溃，第一次应该关闭，第二次应该展开，我只需要进行一次展开。

但在我的情况下，两个崩溃都扩大了。

我尝试添加 role =buttondata-toggle =collapsedata-parent = #myGrouphref =＃collapseOnearia-expanded =falsearia-controls =collapseOne

p>

遵循Stack Overflow Answer中的所有指令

我使用HTML-attributes方法来完成

HTML p>

 < div id =myGroupclass =container> 
< h1>选择类别< / h1> 
< div class =panel> 
< div class =row> 
< div class =col-md-3 col-sm-6 col-xs-12> 
< div class =list-group-item text-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapseonearia-expanded = falsearia-controls =collapseone>< i class =la la-motorcycle pull-left>< / i>< b> Vehicle< / b>< / div> 
< div id =collapseoneclass =panel-collapse collapse> 
< a href =＃class =list-group-item>汽车< / a> 
< a href =＃class =list-group-item>巴士，货车，卡车< / a> 
< a href =＃class =list-group-item>产业车辆< / a> 
< a href =＃class =list-group-item>摩托车< / a> 
< a href =＃class =list-group-item>自行车< / a> 
< a href =＃class =list-group-item>备件< / a> 
< / div> 
< / div> 
< div class =col-md-3 col-sm-6 col-xs-12> 
< div class =list-group-item text-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsetwoaria-expanded = falsearia-controls =collapsetwo>< i class =la la-mobile-phone pull-left>< / i>< b> Mobile< / b>< / div> 
< div id =collapsetwoclass =panel-collapse collapse> 
< a href =＃class =list-group-item>手机< / a> 
< a href =＃class =list-group-item>平板电脑< / a> 
< a href =＃class =list-group-item> Ipads< / a> 
< a href =＃class =list-group-item>配饰< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsethreearia-expanded = falsearia-controls =collapsethree>< i class =la la-money pull-left>< / i>< b>备注&硬币< / B>< / DIV> 
< div id =collapsethreeclass =panel-collapse collapse> 
< a href =＃class =list-group-item>备注< / a> 
< a href =＃class =list-group-item>硬币< / a> 
< / div> 
< / div> 
< div class =col-md-3 col-sm-6 col-xs-12> 
< div class =list-group-item text-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsefouraria-expanded = falsearia-controls =collapsefour>< i class =la la-lightbulb -o pull-left>< / i>< b>电子< / b>< / div> 
< div id =collapsefourclass =panel-collapse collapse> 
< a href =＃class =list-group-item>计算机&笔记本电脑< / A> 
< a href =＃class =list-group-item>电视，音频和视频< / a> 
< a href =＃class =list-group-item>电脑配件< / a> 
< a href =＃class =list-group-item> ACs< / a> 
< a href =＃class =list-group-item>洗衣机< / a> 
< a href =＃class =list-group-item>冰箱< / a> 
< a href =＃class =list-group-item>相机和镜头< / a> 
< a href =＃class =list-group-item>厨房用品< / a> 
< a href =＃class =list-group-item>游戏和娱乐< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsefivearia-expanded = falsearia-controls =collapsefive>< i class =la la-building-o pull-left>< / i>< b> Real Estate< / b>< / div> 
< div id =collapsefiveclass =panel-collapse collapse> 
< a href =＃class =list-group-item>待售< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsesixaria-expanded = falsearia-controls =collapsesix>< i class =la-user-secret pull-left>< / i>< b> Fashion< / b>< / div> 
< div id =collapsesixclass =panel-collapse collapse> 
< a href =＃class =list-group-item>男士< / a> 
< a href =＃class =list-group-item>女性< / 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 id =collapsesevenclass =panel-collapse collapse> 
< a href =＃class =list-group-item>司机和出租车< / a> 
< a href =＃class =list-group-item>教育与课程< / a> 
< a href =＃class =list-group-item> Electonics and Computer< / a> 
< a href =＃class =list-group-item>健康与美容< / a> 
< a href =＃class =list-group-item>健身房和健身< / a> 
< a href =＃class =list-group-item>运动与器材< / a> 
< a href =＃class =list-group-item>其他服务< / a> 
< / div> 
< / div> 
< div class =col-md-3 col-sm-6 col-xs-12> 
< div class =list-group-item text-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapseeightaria-expanded = falsearia-controls =collapseeight>< i class =la la-paw pull-left>< / i>< b> Pet's< / b>< / div> 
< div id =collapseeightclass =panel-collapse collapse> 
< a href =＃class =list-group-item>狗狗< / a> 
< a href =＃class =list-group-item>猫< / a> 
< a href =＃class =list-group-item>鱼类和水族馆< / a> 
< a href =＃class =list-group-item> Food&配件与LT; / A> 
< a href =＃class =list-group-item>其他宠物< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapseninearia-expanded = falsearia-controls =collapsenine>< i class =la-book book pull-left>< / i>< b>教育< / b>< / div> 
< div id =collapsenineclass =panel-collapse collapse> 
< a href =＃class =list-group-item>图书< / a> 
< a href =＃class =list-group-item>在线教程< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsetenaria-expanded = falsearia-controls =collapseten>< i class =la la-venus-mars pull-left>< / i>< b>婚姻< / b>< / div> 
< div id =collapsetenclass =panel-collapse collapse> 
< a href =＃class =list-group-item>男性< / a> 
< a href =＃class =list-group-item>女性< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapseelvenaria-expanded = falsearia-controls =collaelven>< i class =la la-briefcase pull-left>< / i>< b>< / div>< 
< div id =collapseelvenclass =panel-collapse collapse> 
< a href =＃class =list-group-item>数据输入&后台< / a> 
< a href =＃class =list-group-item> BPO和Telecaller< / a> 
< a href =＃class =list-group-item>销售和营销< / a> 
< a href =＃class =list-group-item>操作员和技术员< / a> 
< a href =＃class =list-group-item>库克< / a> 
< a href =＃class =list-group-item>驱动程序< / a> 
< a href =＃class =list-group-item> Hotel and Travel Execute< / a> 
< a href =＃class =list-group-item> IT工程师和开发人员< / a> 
< a href =＃class =list-group-item>设计< / a> 
< a href =＃class =list-group-item> Office助手< / a> 
< a href =＃class =list-group-item> Reception and Front Office< / a> 
< a href =＃class =list-group-item>传递和收集< / a> 
< a href =＃class =list-group-item>会计< / a> 
< a href =＃class =list-group-item>教师< / a> 
< a href =＃class =list-group-item>其他工作< / a> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

这里是小提琴我试过的

解决方案

我建议使用JavaScript切换你想要的方式。我在这里做了什么：在块div中添加了 toggle 类，每当打开一个切换块时，它就会让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 =stylesheethref =https://maxcdn.bootstrapcdn.com/ bootstrap / 3.3.7 / css / bootstrap.min.cssintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =anonymous>< div id =myGroupclass =container> < h1>选择类别< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapseonearia-expanded =false controls =collapseone>< i class =la la-motorcycle pull-left>< / i>< b> Vehicle< / b>< / div> < div id =collapseoneclass =panel-collapse collapse> < a href =＃class =list-group-item>汽车< / a> < a href =＃class =list-group-item>巴士，货车，卡车< / a> < a href =＃class =list-group-item>产业车辆< / a> < a href =＃class =list-group-item>摩托车< / a> < a href =＃class =list-group-item>自行车< / a> < a href =＃class =list-group-item>备件< / a> < / DIV> < / DIV> < div class =col-md-3 col-sm-6 col-xs-12 toggle> < div class =list-group-item text-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsetwoaria-expanded =false < / i>< b> Mobile< / b>< i>< i>< < div id =collapsetwoclass =panel-collapse collapse> < a href =＃class =list-group-item>手机< / a> < a href =＃class =list-group-item>平板电脑< / a> < a href =＃class =list-group-item> Ipads< / a> < a href =＃class =list-group-item>配件< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsethreearia-expanded =false controls"collapsethree>>< i class =la la-money pull-left>< / i>< b>笔记&硬币< / B>< / DIV> < div id =collapsethreeclass =panel-collapse collapse> < a href =＃class =list-group-item>备注< / a> < a href =＃class =list-group-item>硬币< / a> < / DIV> < / DIV> < div class =col-md-3 col-sm-6 col-xs-12 toggle> < div class =list-group-item text-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsefouraria-expanded =false < i>< / i>< b>< / b>< / div> ;&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& < div id =collapsefourclass =panel-collapse collapse> < a href =＃class =list-group-item>计算机&笔记本电脑< / A> < a href =＃class =list-group-item>电视，音频和视频< / a> < a href =＃class =list-group-item>电脑配件< / a> < a href =＃class =list-group-item> ACs< / a> < a href =＃class =list-group-item>洗衣机< / a> < a href =＃class =list-group-item>冰箱< / a> < a href =＃class =list-group-item>相机和镜头< / a> < a href =＃class =list-group-item>厨房配件< / a> < a href =＃class =list-group-item>游戏和娱乐< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsefivearia-expanded =false controls =collapsefive>< i class =la la-building-o pull-left>< / i>< b> Real Estate< / b>< / div> < div id =collapsefiveclass =panel-collapse collapse> < a href =＃class =list-group-item>待售< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsesixaria-expanded =false controls =collapsesix>< i class =la la-user-secret pull-left>< / i>< b> Fashion< / b>< / div> < div id =collapsesixclass =panel-collapse collapse> < a href =＃class =list-group-item>男士< / a> < a href =＃class =list-group-item>女性< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsesevenaria-expanded =false controls =collapseseven>< i class =la la-wrench pull-left>< / i>< b> Service< / b>< / div> < div id =collapsesevenclass =panel-collapse collapse> < a href =＃class =list-group-item>司机和出租车< / a> < a href =＃class =list-group-item>教育与课程< / a> < a href =＃class =list-group-item> Electonics and Computer< / a> < a href =＃class =list-group-item>健康与美容< / a> < a href =＃class =list-group-item>健身房和健身< / a> < a href =＃class =list-group-item>运动与器材< / a> < a href =＃class =list-group-item>其他服务< / a> < / DIV> < / DIV> < div class =col-md-3 col-sm-6 col-xs-12 toggle> < div class =list-group-item text-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapseeightaria-expanded =false controls =collapseeight>< i class =la la-paw pull-left>< / i>< b> Pet's< / b>< / div> < div id =collapseeightclass =panel-collapse collapse> < a href =＃class =list-group-item>狗< / a> < a href =＃class =list-group-item>猫< / a> < a href =＃class =list-group-item>鱼类和水族馆< / a> < a href =＃class =list-group-item> Food&配件与LT; / A> < a href =＃class =list-group-item>其他宠物< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapseninearia-expanded =false controls =collapsenine>< i class =la la-book pull-left>< / i>< b>教育< / b>< / div> < div id =collapsenineclass =panel-collapse collapse> < a href =＃class =list-group-item>图书< / a> < a href =＃class =list-group-item>在线教程< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapsetenaria-expanded =falsearia-控制=collapseten>< i class =la la-venus-mars pull-left>< / i>< b> Matrimony< / b>< / div> < div id =collapsetenclass =panel-collapse collapse> < a href =＃class =list-group-item>男性< / a> < a href =＃class =list-group-item>女性< / 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-centerrole =buttondata-toggle =collapsedata-parent =＃myGrouphref =＃collapseelvenaria-expanded =false controls =collaelven>< i class =la la-briefcase pull-left>< / i>< b>作业< / b>< / div> < div id =collapseelvenclass =panel-collapse collapse> < a href =＃class =list-group-item>数据输入&后台< / a> < a href =＃class =list-group-item> BPO和Telecaller< / a> < a href =＃class =list-group-item>销售和营销< / a> < a href =＃class =list-group-item>操作员和技术员< / a> < a href =＃class =list-group-item>库克< / a> < a href =＃class =list-group-item>驱动程序< / a> < a href =＃class =list-group-item> Hotel and Travel执行< / a> < a href =＃class =list-group-item> IT工程师和开发人员< / a> < a href =＃class =list-group-item>设计< / a> < a href =＃class =list-group-item> Office助手< / a> < a href =＃class =list-group-item> Reception and Front Office< / a> < a href =＃class =list-group-item>传递和收集< / a> < a href =＃class =list-group-item>会计< / a> < a href =＃class =list-group-item>教师< / a> < a href =＃class =list-group-item>其他工作< / 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.jsintegrity =sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txacrossorigin =anonymous>< / script>

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

In my page i using 11 bootstrap 3 collapse, I need to make only one expand if i click on second collapse the first should close and second should expand.

But in my case both collapse are expanded.

I tried adding role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"

but nothing works

followed all instruction given in Stack Overflow Answer

I used HTML-attributes method to do

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

解决方案

I suggest using JavaScript to toggle them how you want. What I've done here: added the toggle class to your block divs, which get a JavaScript listener to collapse all other blocks each time a toggle block is opened.

$(".collapse.in").collapse('hide'); will find all of the blocks that need collapsing, and collapse them.

I left in a less efficient solution commented out: $(this).parent().parent().parent()... because I hope it shows you how navigating all of the containing divs works.

The if statement: if ( !$(this).find(".panel-collapse").hasClass('in') ) prevents collapsing when you're clicking within the block that is already open.

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

Hope this solution does what you need it to! Let me know if you have any additional questions.

这篇关于无法一次只展开一次崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！