Bootstrap 3 折叠显示状态与雪佛龙图标 [英] Bootstrap 3 Collapse show state with Chevron icon
问题描述
使用来自 Bootstrap 3 Javascript 折叠示例页面的核心示例,我已经能够使用 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");});
这有效(未在所有浏览器中进行全面测试),但我想知道是否有更优雅的解决方案?
理想情况下,我想使用核心功能,但我不确定如何使用它实现相同的结果.
$('#accordion').on('hidden.bs.collapse', function () {//做点什么...})
这是 jsfiddle 中的工作版本.
对于以下 HTML(来自 Bootstrap 3 示例):
.panel-heading .accordion-toggle:after {/* 打开"面板的符号 */font-family: 'Glyphicons Halflings';/* 启用字形必不可少 */内容:e114";/* 根据需要调整,取自 bootstrap.css */浮动:对;/* 根据需要调整 */颜色:灰色;/* 根据需要调整 */}.panel-heading .accordion-toggle.collapsed:after {/* 折叠"面板的符号 */内容:e080";/* 根据需要调整,取自 bootstrap.css */}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><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">可折叠组项目 #1</a>
<div id="collapseOne" class="panel-collapse 折叠在"><div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf Moon offcia aute, non-cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor,sunt aliqua 放一只鸟,鱿鱼单一来源的咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica,精酿啤酒,wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌,原始牛仔布美学合成器你可能没有听说过它们,可持续 VHS.
<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">可折叠组项目 #2</a>
<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 offcia aute, non-cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor,sunt aliqua 放一只鸟,鱿鱼单一来源的咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica,精酿啤酒,wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌,原始牛仔布美学合成器你可能没有听说过它们,可持续 VHS.