当另一个元素打开时，关闭手风琴元素

Question

I am working on a Accordion. 我正在制作手风琴。 It's going great, however, when I open a link then open a 2nd link, the original link doesn't close. 但是，当我打开一个链接然后打开第二个链接时，原始链接不会关闭。 How do I resolve this? 我该如何解决？

Demo: https://jsfiddle.net/g8xxh1Lp/ 演示： https ： //jsfiddle.net/g8xxh1Lp/

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'); @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 0px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container-fluid" id="singleacord"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#tab1">General</a> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <div> <ul class="red_bullets"> <li> <a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse11">Test 1</a> </li> </ul> <div class="panel-collapse collapse" id="collapse11"> <div class="panel-body"> <p>Test 1 Textx</p> </div> </div> <ul class="red_bullets"> <li> <a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse22">Test 2</a> </li> </ul> <div class="panel-collapse collapse" id="collapse22"> <div class="panel-body"> <p>Test 2 Text</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 1

Just give an id - accordion to your div and class - panel - group which is the parent of ul.red_bullets and wrap red_bullets within one more div with class - panel panel-default . 只需给您的div和class - panel - group提供一个id accordion ，它是ul.red_bullets的父级，并使用class - panel panel-default在另一个div包装red_bullets 。 That's how the grouping or structure should be. 这就是分组或结构的方式。 Check out the below updated snippet 查看以下更新的代码段

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'); @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 0px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container-fluid" id="singleacord"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#tab1">General</a> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <div class="panel-group" id="accordion"> <!--This here--> <div class="panel panel-default"><!--and this--> <ul class="red_bullets"> <li> <a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse11">Test 1</a> </li> </ul> <div class="panel-collapse collapse" id="collapse11"> <div class="panel-body"> <p>Test 1 Textx</p> </div> </div> <ul class="red_bullets"> <li> <a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse22">Test 2</a> </li> </ul> <div class="panel-collapse collapse" id="collapse22"> <div class="panel-body"> <p>Test 2 Text</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 2

You can use the bootstrap accordion like this. 您可以像这样使用引导手风琴。

 <! doctype HTML> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> </body> </html>

当另一个元素打开时，关闭手风琴元素

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-11-07 13:53:22

解决方案2
2 2016-11-07 13:47:14

当另一个元素打开时，关闭手风琴元素

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-11-07 13:53:22

解决方案2 2 2016-11-07 13:47:14

解决方案1
3 已采纳 2016-11-07 13:53:22

解决方案2
2 2016-11-07 13:47:14