- 首页
- 其他开发
- 单击时引导程序 3 glyphicon 交换状态
单击时引导程序 3 glyphicon 交换状态
[英] bootstrap 3 glyphicon swap state on click
本文介绍了单击时引导程序 3 glyphicon 交换状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
帮助，我希望在引导程序 3 中折叠时交换字形图像.我在这里找到了这个线程 Bootstrap 3 使用 Chevron 图标折叠显示状态这在 jsfiddle 中有效，但是当复制到我自己的页面时，折叠有效，但图标不会从上到下交换.有什么我想念的吗?我什至将它放在 Bootstrap 3 的完整下载版本中，但图标无法换出.代码如下:
<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><i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<div id="collapseOne" class="panel-collapse 折叠在"><div class="panel-body">卡通动漫人物头像 卡通动漫头像 卡通动漫头像 头像网...
这里是js:
$('#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");});
解决方案
我的一个同事刚刚遇到了这个问题，并向我指出了这个问题.这是我给他的解决方案:
HTML:
<div class="panel panel-default"><div class="panel-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><h4 class="panel-title">可折叠组项目 #1<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i></a>
<div id="collapseOne" class="panel-collapse 折叠在"><div class="panel-body">...
<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">可折叠组项目 #2</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
<div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">...
JavaScript:
$.fn.accordionChevrons = function() {返回 this.each(function(i, 手风琴) {$(".accordion-toggle", 手风琴).click(function(ev) {var 链接 = ev.target;var header = $(link).closest(".panel-heading");var chevState = $("i.indicator", header).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');$("i.indicator", 手风琴).not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");});});};$('#accordion').accordionChevrons();
此方法允许人字形位于标题中的任何位置，因此您也可以单击人字形来切换面板.它还允许您在同一页面上有多个手风琴，而不会相互干扰.
Help, I am looking to have the glyphicon image swap on collapse in bootstrap 3. I found this thread here Bootstrap 3 Collapse show state with Chevron icon
This works in jsfiddle but when copied to my own page the collapse works but the icon does not swap from up to down. Is there something I am missing? I have even placed this in a full download version of Bootstrap 3 and the icon fails to swap out. Here is the code:
<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><i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high...
</div>
</div>
</div>
</div>
</div>
and here is the js:
$('#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");
});
解决方案
A coworker of mine just had this problem and pointed me to this question. Here's the solution I gave him:
HTML:
<div class="panel-group move-down" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<h4 class="panel-title">
Collapsible Group Item #1
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</h4>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
JavaScript:
$.fn.accordionChevrons = function() {
return this.each(function(i, accordion) {
$(".accordion-toggle", accordion).click(function(ev) {
var link = ev.target;
var header = $(link).closest(".panel-heading");
var chevState = $("i.indicator", header)
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
$("i.indicator", accordion)
.not(chevState)
.removeClass("glyphicon-chevron-down")
.addClass("glyphicon-chevron-up");
});
});
};
$('#accordion').accordionChevrons();
This method allows the chevron to be anywhere in the header, so you can also click on the chevron to toggle the panel. It also allows you to have multiple accordions on the same page without the chevrons interfering with each other.
这篇关于单击时引导程序 3 glyphicon 交换状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
