Bootstrap 3使用Chevron图标折叠显示状态
使用从Bootstrap 3 Javascript 示例页面获取的关于Collapse的核心示例，我已经能够使用V形图标显示崩溃的状态。
我有这个工作使用：
$('#accordion .accordion-toggle').click(function (e) { var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up"); }); 这工作（没有在所有浏览器中完全testing），但我想知道是否有一个更优雅的解决scheme呢？
理想情况下，我想使用核心function，但我不知道如何实现相同的结果。
$('#accordion').on('hidden.bs.collapse', function () { //do something... })
这是jsfiddle中的一个工作版本。
对于下面的HTML（来自Bootstrap 3例子 ）：
.panel-heading .accordion-toggle:after { /* symbol for "opening" panels */ font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */ content: "\e114"; /* adjust as needed, taken from bootstrap.css */ float: right; /* adjust as needed */ color: grey; /* adjust as needed */ } .panel-heading .accordion-toggle.collapsed:after { /* symbol for "collapsed" panels */ content: "\e080"; /* adjust as needed, taken from bootstrap.css */ }
<link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <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"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <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"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <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>
你可以使用这种types的代码：
function toggleChevron(e) { $(e.target) .prev('.panel-heading') .find('i.indicator') .toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); } $('#accordion').on('hidden.bs.collapse', toggleChevron); $('#accordion').on('shown.bs.collapse', toggleChevron);
=>工作JsFiddle
为了提高最多的答案，你可能会注意到在页面的初始加载时，人字形指向同一个方向。 这可以通过将“折叠”类添加到要加载的元素折叠来解决。
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <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"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <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"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <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>
这是一个工作小提琴： http : //jsfiddle.net/3gYa3/585/
感谢biggates和steakpi。 作为Dreamonic的回答，我做了一些修改，使所有的标题可点击（不仅标题string和gluphs），并从链接下划线。 为了强制图标出现在同一行，我在CSS指令的末尾添加了h4。 这是修改的代码：
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <h4 class="panel-title">Collapsible Group Item #1</h4> </a> </div> <div id="collapseOne" class="panel-collapse collapse"> <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"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <h4 class="panel-title">Collapsible Group Item #2</h4> </a> </div> <div id="collapseTwo" class="panel-collapse collapse"> <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"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <h4 class="panel-title">Collapsible Group Item #3</h4> </a> </div> <div id="collapseThree" class="panel-collapse collapse"> <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>
而修改后的CSS：
.panel-heading .accordion-toggle h4:after { /* symbol for "opening" panels */ font-family: 'Glyphicons Halflings'; content: "\e114"; float: right; color: grey; overflow: no-display; } .panel-heading .accordion-toggle.collapsed h4:after { /* symbol for "collapsed" panels */ content: "\e080"; } a.accordion-toggle{ text-decoration: none; }
改进Bludream的答案：
你绝对可以使用FontAwesome！
确保包括“折叠”以及“面板标题”类。 除非您单击面板，否则不包括“折叠”类，以便包含“折叠”类以便显示正确的V形（即，打开时折叠和V形折叠时显示V形对话框）。
HTML
<div class="panel panel-default"> <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div> <div class="collapse" id="collapseOrderItems1"> <p>Lorem ipsum...</p> </div> </div>
CSS
.panel-heading .chevron:after { content: "\f078"; } .panel-heading.collapsed .chevron:after { content: "\f054"; }
另外，创build一个新的类而不是使用现有的类是一个很好的习惯。
请参阅Codepen： http ://codepen.io/anon/pen/PPxOJX
这里有几个纯CSS辅助类，它可以让你在html中处理任何types的切换内容。
它适用于您需要切换的任何元素。 无论你的布局是什么，你只需把它放在一些元素中，在toggle元素中带有.if-collapsed类和.if-not-collapsed类。
唯一的问题是你必须确保把你想要的切换开始状态。 如果它最初是closures的，那么在开关上放置一个折叠的类。
它还需要：不select器，它不能在IE8上工作。
HTML例子：
<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample"> <!--You can put any valid html inside these!--> <span class="if-collapsed">Open</span> <span class="if-not-collapsed">Close</span> </a> <div class="collapse" id="collapseExample"> <div class="well"> ... </div> </div>
较less的版本：
[data-toggle="collapse"] { &.collapsed .if-not-collapsed { display: none; } &:not(.collapsed) .if-collapsed { display: none; } }
CSS版本：
[data-toggle="collapse"].collapsed .if-not-collapsed { display: none; } [data-toggle="collapse"]:not(.collapsed) .if-collapsed { display: none; }
简单的例子
- 显示/隐藏身体状况
- 得到它的父母att
- 得到find图标
- 更改图标
input简单
HTML ：
<body> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a> </div> <div id="jai" class="accordion-body collapse in"> <div> <div class="accordion-inner">body content 1</div> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div> <div class="accordion-inner">body content 2</div> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a> </div> <div id="collapse3" class="accordion-body collapse"> <div> <div class="accordion-inner">body content 3</div> </div> </div> </div> </body>
JavaScript的
$('div.accordion-body').on('shown', function () { $(this).parent("div").find(".icon-chevron-down") .removeClass("icon-chevron-down").addClass("icon-chevron-up"); }); $('div.accordion-body').on('hidden', function () { $(this).parent("div").find(".icon-chevron-up") .removeClass("icon-chevron-up").addClass("icon-chevron-down"); });
或者…你可以把这样的风格。
.panel-title a.collapsed { background: url(../img/arrow_right.png) center right no-repeat; } .panel-title a { background: url(../img/arrow_down.png) center right no-repeat; }
我正在使用字体真棒 ！ 并希望一个面板是可折叠的
<div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div> <div class="collapse in" id="collapseOrderItems"> .... </div> </div>
和CSS
.panel-heading .fa-chevron:after { content: "\f078"; } .panel-heading.collapsed .fa-chevron:after { content: "\f054"; }
Angular似乎在这里引起了基于JavaScript的方法的问题（至less我尝试过）。 我在这里find了这个解决scheme： http : //www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang 。 其要点是在切换button上使用data-ng-click ，并使该方法使用$scope上下文更改控制器中的button。
我想我可以提供更多的细节…我的button被设置为它们崩溃的div的初始状态的graphics（glyphicon-chevron-right == collapsed div）。
page.html中：
<div class="title-1"> <button data-toggle="collapse" data-target="#panel-{{ p_idx }}" class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"></button> </div> <div id="panel-{{ p_idx }}" class="collapse sect"> ... </div>
controllers.js：
.controller('PageController', function($scope, $rootScope) { $scope.collapse = function (event) { $(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right"); }; )
如果你正试图使用这个面板只（不accordeon），试试这个代码：
<div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Panel heading with title</a> </h4> </div> <div id="collapseExample" class="panel-collapse collapse in"> <div class="panel-body"> Panel content </div> </div> </div>
我想要一个纯粹的HTML方法，因为我想折叠并扩展通过模板添加的HTML！ 我想出了这个…
https://jsfiddle.net/3mguht2y/1/
var noJavascript = ":)";
哪个可能对某人有用:)
