将开启/closures图标添加到Twitter Bootstrap折叠（手风琴）
我已经设置了Bootstrap 手风琴的这个简单的版本：
简单的手风琴： http : //jsfiddle.net/darrenc/cngPS/
目前这个图标只是指向下 ，但是有人知道需要实现什么样的JS才能将图标的类改为：
<i class="icon-chevron-up"></i> …所以当它被展开时它指向了 ，当崩溃时它又被重新打开了，所以第四个呢？
这就是那些在Bootstrap 3中寻找解决scheme的人的答案（就像我自己）。
HTML部分：
<div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"> <span class="glyphicon glyphicon-minus"></span> </button> </div> <div id="demo" class="collapse in">Some dummy text in here.</div>
js部分：
$('.collapse').on('shown.bs.collapse', function(){ $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus"); }).on('hidden.bs.collapse', function(){ $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus"); });
示例手风琴：
Bootply手风琴的例子
这是我的Bootstrap 2.x的方法。 这只是一些CSS。 不需要JavaScript：
.accordion-caret .accordion-toggle:hover { text-decoration: none; } .accordion-caret .accordion-toggle:hover span, .accordion-caret .accordion-toggle:hover strong { text-decoration: underline; } .accordion-caret .accordion-toggle:before { font-size: 25px; vertical-align: -3px; } .accordion-caret .accordion-toggle:not(.collapsed):before { content: "▾"; margin-right: 0px; } .accordion-caret .accordion-toggle.collapsed:before { content: "▸"; margin-right: 0px; }
只需在手风琴组div上添加class accordion-caret即可：
<div class="accordion-group accordion-caret"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne"> <strong>Header</strong> </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Content </div> </div> </div>
Bootstrap崩溃有一些事件，你可以做出反应：
$(document).ready(function(){ $('#accordProfile').on('shown', function () { $(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up"); }); $('#accordProfile').on('hidden', function () { $(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down"); }); });
使用CSS伪select器：在使用Bootstrap 3的集成图示为一个没有JS的答案 ，对你的HTML进行小的修改…
CSS
.panel-heading [data-toggle="collapse"]:after { font-family: 'Glyphicons Halflings'; content: "\e072"; /* "play" icon */ float: right; color: #b0c5d8; font-size: 18px; line-height: 22px; /* rotate "play" icon from > (right arrow) to down arrow */ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .panel-heading [data-toggle="collapse"].collapsed:after { /* rotate "play" icon from > (right arrow) to ^ (up arrow) */ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
HTML
将class="collapsed"添加到默认closures的任何定位标记。
这将转动锚点，如
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
成
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
CodePen现场示例
http://codepen.io/anon/pen/VYobER
截图
添加到@muffls的答案，以便这与所有的twitter引导崩溃，并在animation开始之前更改为箭头。
$('.collapse').on('show', function(){ $(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down"); }).on('hide', function(){ $(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left"); });
根据您的HTML结构，您可能需要修改parent() 。
我认为最好的代码是这些：
$('#accordion1').collapse({ toggle: false }).on('show',function (e) { $(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up"); }).on('hide', function (e) { $(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down"); });
如果有人感兴趣，这是你如何使用BS3，因为他们改变了事件名称：
$('.collapse').on('show.bs.collapse', function(){ var i = $(this).parent().find('i') i.toggleClass('fa-caret-right fa-caret-down'); }).on('hide.bs.collapse', function(){ var i = $(this).parent().find('i') i.toggleClass('fa-caret-down fa-caret-right'); });
您只需将示例中的类名更改为您在案例中使用的类名。
这是我的解决scheme，从@ john-magnolia发布的解决scheme进一步完善，并解决了一些问题
/** * Toggle on/off arrow for Twitter Bootstrap collapsibles. * * Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page. */ function animateCollapsibles() { $('.collapse').on('show', function() { var $t = $(this); var header = $("a[href='#" + $t.attr("id") + "']"); header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down"); }).on('hide', function(){ var $t = $(this); var header = $("a[href='#" + $t.attr("id") + "']"); header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right"); }); }
这里是示例标记：
<div class="accordion" id="accordion-send"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund"> <i class="icon icon-chevron-right"></i> Send notice </a> </div> <div id="collapse-refund" class="accordion-body collapse"> <div class="accordion-inner"> <p>Lorem ipsum Toholampi city</p> </div> </div> </div> </div>
引导v3解决scheme（其中的事件有不同的名称），也只使用一个jQueryselect器（如下所示）：
$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n) { $(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); });
这就是我没有任何JS的做法。
我使用了图标glyphicon-triangle-right，但它可以与其他任何图标一起使用，它的作用是在面板打开或不打开的情况下对图标应用90度旋转。 我正在使用Bootstrap 3.3.5 。
CSS代码
h4.panel-title a { display: block; } h4.panel-title a.collapsed .glyphicon-triangle-right { color: #ada9a9 !important; transform: rotate(0deg); } h4.panel-title a .glyphicon-triangle-right { color: #515e64 !important; transform: rotate(90deg); }
这是从Bootstrap例子中取得的HTML结构
<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"> Proven Expertise <span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span> </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>
以上都没有为我工作，但我想出了这个，它的工作：
function toggleChevron(el) { if ($(el).find('i').hasClass('icon-chevron-left')) $(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down"); else $(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left"); }
HTML实现：
<div class="accordion" id="accordion-send"> <div class="accordion-group"> <div class="accordion-heading" onClick="toggleChevron(this)"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund"> <i class="icon icon-chevron-right"></i> Send notice </a> ...
最可读的纯CSS解决scheme可能是使用aria-expanded属性。 请记住，您需要将aria-expanded =“false”添加到所有折叠元素，因为这不是在加载时设置的（仅在第一次单击时）。
HTML：
<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-down"></span> Title </h2>
CSS：
h2[aria-expanded="false"] span.glyphicon-chevron-down, h2[aria-expanded="true"] span.glyphicon-chevron-right { display: none; } h2[aria-expanded="true"] span.glyphicon-chevron-down, h2[aria-expanded="false"] span.glyphicon-chevron-right { display: inline; }
适用于Bootstrap 3.x.
@RobSadler：
RE马丁Wickman的CSS唯一版本…
您可以通过将accordion-caret放在锚标签上并在默认情况下为其折叠类来解决该问题。 像这样：
<div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne"> <strong>Header</strong> </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Content </div> </div>
这对我有效。
对于Bootstrup 3.2 + FontAwesome
$(document).ready(function(){ $('#accordProfile').on('shown.bs.collapse', function () { $(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up"); }); $('#accordProfile').on('hidden.bs.collapse', function () { $(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down"); }); });
有时你必须这样写。 如果是这样
$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
自动生成（class =“折叠”），当你按下隐藏菜单。
ps当你需要创build一个树形菜单
这已经被许多方面的回答，但我想到的是对Bootstrap 3和字体真棒最简单和最简单的。 我已经做了
$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});
这只是切换我想要显示的图标的CSS类。 我将这个类的开关添加到我想要应用的项目中。 这可以添加到您想要切换图标的任何项目。
另一个没有使用崩溃function本身的JavaScript解决scheme：
/* Prevent block display and transition animation */ .expand-icon.collapse.in, .collapse-icon.collapse.in { display: inline; } .expand-icon.collapsing { display: none; } /* HTML Toggler with glyphicons */ <a data-toggle="collapse" href=".my-collapse"> <span class="my-collapse collapse-icon collapse in"> <span class="glyphicon glyphicon-collapse-up"></span> </span> <span class="my-collapse expand-icon collapse"> <span class="glyphicon glyphicon-expand"></span> </span> </a>
对于使用Bootstrap 3的纯CSS（无图标）解决scheme，我不得不根据Martin Wickman的回答做一些调整。
我没有使用手风琴符号，因为它是用BS3中的面板完成的。
此外，我必须在页面加载时打开的项目中包含最初的HTML aria-expanded =“true”。
这是我使用的CSS。
.accordion-toggle:hover { text-decoration: none; } .accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; } .accordion-toggle:before { font-size: 25px; } .accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; } .accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }
这是我的消毒HTML：
<div id="acc1"> <div class="panel panel-default"> <div class="panel-heading"> <span class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1 </a> </span> </div> <div id=“acc1-1” class="panel-collapse collapse in"> <div class="panel-body"> Text 1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <span class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2 </a> </span> </div> <div id=“acc1-2” class="panel-collapse collapse"> <div class="panel-body"> Text 2 </div> </div> </div> </div>
