[英]Toggle the glyphicon with bootstrap collapse
I have glyphicon-chevron-down
when div is in collapsed
state,i want to replace it with glyphicon-chevron-up
when the div is in collapse in
state.I have many of these collapsible
divs in my project.So i need to toggle
the glyphicon
on press of particular collapsibe content(or div). 我已经
glyphicon-chevron-down
时,DIV是collapsed
状态,我想用来替换glyphicon-chevron-up
时股利是collapse in
state.I有许多的collapsible
中的div我project.So我需要toggle
按下特定collapsibe内容(或div)的glyphicon
。
HTML HTML
<div class="divcontainer">
<span>Click -----></span>
<span class="glyphicon glyphicon-chevron-down" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
content
</div>
JavaScript JavaScript的
$(document).ready(function () {
$('.glyphicon-chevron-down').click(function () {
$(this).parent("div").find(".glyphicon-chevron-down")
.toggleClass("glyphicon-chevron-up");
});
});
Your JS is putting an emphasis on the wrong thing. 你的JS强调错误的东西。
Find
is very slow and best avoided if possible -- and it's very possible here. 如果可能的话,
Find
非常缓慢并且最好避免 - 这在这里很有可能。 Just change it to this: 只需将其更改为:
$(document).ready(function () {
$('.glyphicon').click(function () {
$(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
});
});
JS Fiddle: http://jsfiddle.net/ft4mnynh/ JS小提琴: http : //jsfiddle.net/ft4mnynh/
I have changed the selectors and events like below 我已经更改了下面的选择器和事件
$(document).ready(function () {
$('.divcontainer').click(function () {
$(this).find("span:eq(1)")
.toggleClass('glyphicon-chevron-down')
.toggleClass("glyphicon-chevron-up");
});
});
Hope this helps 希望这可以帮助
Use this below jquery code and just change glyphicon name as you wish 使用下面的jquery代码,只需根据需要更改glyphicon名称
<script> $('.collapse').on('shown.bs.collapse', function(){ $(this).parent().find(".glyphicon-menu-right").removeClass("glyphicon-menu-right").addClass("glyphicon-menu-down"); }).on('hidden.bs.collapse', function(){ $(this).parent().find(".glyphicon-menu-down").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-right"); }); </script>
You need to toggle both classes chevron-up
and chevron-down
. 你需要切换
chevron-up
和chevron-down
这两个类。 You can find the correct div using the more general glyphicon
class. 您可以使用更一般的
glyphicon
类找到正确的div。
I also added id to the div, so you don't need to find it by the down
class 我还在div中添加了id,所以你不需要
down
课时找到它
See: http://jsfiddle.net/amwLaojj/1/ 请参阅: http : //jsfiddle.net/amwLaojj/1/
$(document).ready(function () {
$('#myglyph').click(function () {
$(this).parent("div").find(".glyphicon")
.toggleClass("glyphicon-chevron-up")
.toggleClass("glyphicon-chevron-down");
});
});
Update: 更新:
Instead of ID, you can use: 您可以使用以下代码而不是ID:
$('.glyphicon[data-toggle=collapse]').click(function () {
Updated in: http://jsfiddle.net/amwLaojj/3/ 更新于: http : //jsfiddle.net/amwLaojj/3/
The following code worked for me. 以下代码对我有用。 As far as I can tell the bootstrap js events only fire on the "div.collapse" element, ie, the hidden and shown block(s).
据我所知,bootstrap js事件只触发“div.collapse”元素,即隐藏和显示的块。 Even the jquery "click" event on "div.panel-heading" or any child was unresponsive.
甚至“div.panel-heading”上的jquery“click”事件或任何孩子都没有反应。
<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="false" aria-controls="collapseOne">
Getting Started
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a id="choosing">Choosing a topic</a>
<a id="exploring">Exploring a topic</a>
</div></div>
JQuery JQuery的
$(document).ready(function () {
$('div.collapse').on("show.bs.collapse || hide.bs.collapse", function () {
let glyph = $(this).siblings("div.panel-heading").find('span.glyphicon');
glyph.hasClass("glyphicon-menu-right") ? glyph.toggleClass("glyphicon-menu-down") : glyph.toggleClass("glyphicon-menu-right");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.