Bootstrap 手风琴不会折叠之前显示的 div
Bootstrap accordion won't collapse previously shown div
我有以下代码片段正在做手风琴。单击后它会折叠并隐藏。但是,当当前折叠一个并单击另一个时,第一个折叠的 div 不会隐藏。相反,它也会折叠下一个,导致两个 div 折叠。
<script src="../../S/Content/js/jquery-1.9.1.min.js"></script>
<script src="../../S/Content/js/bootstrap.min.js"></script>
<script src="../../S/Content/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<link href="../../S/Content/stylesheets/_bootstrap.min.css" rel="stylesheet" />
<link href="../../S/Content/stylesheets/ui-custom-style.min.css" rel="stylesheet" />
<link href="../../S/Content/stylesheets/_ionicons.min.css" rel="stylesheet" />
<div class="col-sm-8 badges-area">
<div class="row badge-items" id="accordion">
<div class="col-sm-4 badge-item" data-parent="#accordion" data-toggle="collapse" href="#badge-info-body">
<img src="../img/badge-sample.png"/>
</div>
<div class="col-sm-4 badge-item" data-parent="#accordion" data-toggle="collapse" href="#try">
<img src="../img/badge-sample.png"/>
</div>
<div class="accordion-group">
<div class="col-sm-11 badge-info arrow arrow-left panel-collapse collapse" id="badge-info-body" role="tabpanel" >
<div class="col-xs-4 col-sm-4">
<img src="../img/badge-sample.png"/>
</div>
<div class="col-xs-8 col-sm-8">
<p> This is for the first.
</p>
</div>
</div>
<div class="col-sm-11 badge-info arrow arrow-middle panel-collapse collapse" id="try" role="tabpanel" >
<div class="col-xs-4 col-sm-4">
<img src="../img/badge-sample.png"/>
</div>
<div class="col-xs-8 col-sm-8">
<p> This is for the second.
</p>
</div>
</div>
</div>
</div>
</div>
我哪里可能出错了?这里有一个 fiddle https://jsfiddle.net/DTcHh/23951/ 当我点击 First Accordion 时,它会崩溃,这没关系。当我点击第二个手风琴时,前一个没有关闭,但它折叠了另一个。感谢您的帮助。
<div class="col-md-12 col-lg-12">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#searchDropdownsPanel">
<h3 class="panel-title">
Search filters
<span id="glyphiconicons" class="glyphicon glyphicon-chevron-down pull-right">
</span>
</h3>
</div><!--panel heading end -->
<div id="searchDropdownsPanel" class="panel-collapse collapse in">
<form {{action "search" on="submit"}}>
<div class="panel-body">
<div class="col-md-12 col-lg-12">
{{yield}}
</div>
</div>
<div class="panel-footer text-right">
<button id="searchFilterClearButton" {{action 'clear'}} type="button" class="btn btn-default">Clear</button>
<button id="searchFilterSubmitButton" type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
</div>
这是我使用的代码,没有能力尝试你的代码很难得到帮助。
我的代码和你的代码之间的区别在于我使用 data-target="#searchDropdownsPanel" 来指示必须折叠哪个 div。
希望对您有所帮助。
已更新 fiddle -> https://jsfiddle.net/sherin81/y37j8g62/
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
First accordion
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<p> This is for the first.
</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Second accordion
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<p> This is for the second.
</p>
</div>
</div>
</div>
试试这个。
data-parent="#accordion"
正在按照您的预期运行。
我有以下代码片段正在做手风琴。单击后它会折叠并隐藏。但是,当当前折叠一个并单击另一个时,第一个折叠的 div 不会隐藏。相反,它也会折叠下一个,导致两个 div 折叠。
<script src="../../S/Content/js/jquery-1.9.1.min.js"></script>
<script src="../../S/Content/js/bootstrap.min.js"></script>
<script src="../../S/Content/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<link href="../../S/Content/stylesheets/_bootstrap.min.css" rel="stylesheet" />
<link href="../../S/Content/stylesheets/ui-custom-style.min.css" rel="stylesheet" />
<link href="../../S/Content/stylesheets/_ionicons.min.css" rel="stylesheet" />
<div class="col-sm-8 badges-area">
<div class="row badge-items" id="accordion">
<div class="col-sm-4 badge-item" data-parent="#accordion" data-toggle="collapse" href="#badge-info-body">
<img src="../img/badge-sample.png"/>
</div>
<div class="col-sm-4 badge-item" data-parent="#accordion" data-toggle="collapse" href="#try">
<img src="../img/badge-sample.png"/>
</div>
<div class="accordion-group">
<div class="col-sm-11 badge-info arrow arrow-left panel-collapse collapse" id="badge-info-body" role="tabpanel" >
<div class="col-xs-4 col-sm-4">
<img src="../img/badge-sample.png"/>
</div>
<div class="col-xs-8 col-sm-8">
<p> This is for the first.
</p>
</div>
</div>
<div class="col-sm-11 badge-info arrow arrow-middle panel-collapse collapse" id="try" role="tabpanel" >
<div class="col-xs-4 col-sm-4">
<img src="../img/badge-sample.png"/>
</div>
<div class="col-xs-8 col-sm-8">
<p> This is for the second.
</p>
</div>
</div>
</div>
</div>
</div>
我哪里可能出错了?这里有一个 fiddle https://jsfiddle.net/DTcHh/23951/ 当我点击 First Accordion 时,它会崩溃,这没关系。当我点击第二个手风琴时,前一个没有关闭,但它折叠了另一个。感谢您的帮助。
<div class="col-md-12 col-lg-12">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#searchDropdownsPanel">
<h3 class="panel-title">
Search filters
<span id="glyphiconicons" class="glyphicon glyphicon-chevron-down pull-right">
</span>
</h3>
</div><!--panel heading end -->
<div id="searchDropdownsPanel" class="panel-collapse collapse in">
<form {{action "search" on="submit"}}>
<div class="panel-body">
<div class="col-md-12 col-lg-12">
{{yield}}
</div>
</div>
<div class="panel-footer text-right">
<button id="searchFilterClearButton" {{action 'clear'}} type="button" class="btn btn-default">Clear</button>
<button id="searchFilterSubmitButton" type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
</div>
这是我使用的代码,没有能力尝试你的代码很难得到帮助。 我的代码和你的代码之间的区别在于我使用 data-target="#searchDropdownsPanel" 来指示必须折叠哪个 div。
希望对您有所帮助。
已更新 fiddle -> https://jsfiddle.net/sherin81/y37j8g62/
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
First accordion
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<p> This is for the first.
</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Second accordion
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<p> This is for the second.
</p>
</div>
</div>
</div>
试试这个。
data-parent="#accordion"
正在按照您的预期运行。