使用引导折叠切换字形图标答案

【问题标题】：Toggle the glyphicon with bootstrap collapse使用引导折叠切换字形图标
【发布时间】：2016-02-29 03:55:08
【问题描述】：

当 div 处于 collapsed 状态时，我有 glyphicon-chevron-down，当 div 处于 collapse in 状态时，我想用 glyphicon-chevron-up 替换它。我的项目中有很多 collapsible div。所以我需要 toggle glyphicon 按下特定的折叠内容（或 div）。

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

$(document).ready(function () {
    $('.glyphicon-chevron-down').click(function () {
        $(this).parent("div").find(".glyphicon-chevron-down")
            .toggleClass("glyphicon-chevron-up");
    });
});

小提琴here

【问题讨论】：

标签： javascript jquery html twitter-bootstrap glyphicons

【解决方案1】：

以下代码对我有用。据我所知，引导 js 事件仅在“div.collapse”元素上触发，即隐藏和显示的块。即使是“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

$(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");
    });
});

【讨论】：

【解决方案2】：

你的 JS 把重点放在了错误的事情上。 Find 非常慢，如果可能的话最好避免——而且在这里很有可能。只需将其更改为：

$(document).ready(function () {
    $('.glyphicon').click(function () {
        $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
    });
});

JS 小提琴：http://jsfiddle.net/ft4mnynh/

【讨论】：

但使用它会覆盖我页面中的其他字形图标
@IamRaviteja 然后只需添加一个用于下拉菜单的唯一类，如下所示：jsfiddle.net/gt1uwu79

【解决方案3】：

您需要切换两个类chevron-up 和chevron-down。您可以使用更通用的glyphicon 类找到正确的 div。

我还在div中添加了id，所以你不需要通过down类找到它

见：http://jsfiddle.net/amwLaojj/1/

$(document).ready(function () {
    $('#myglyph').click(function () {
        $(this).parent("div").find(".glyphicon")
            .toggleClass("glyphicon-chevron-up")
            .toggleClass("glyphicon-chevron-down");
   });
});

更新：

您可以使用：而不是 ID：

$('.glyphicon[data-toggle=collapse]').click(function () {

更新于：http://jsfiddle.net/amwLaojj/3/

【讨论】：

当它处于collapse in 状态时，它正在改变其他字形

【解决方案4】：

试试FIDDLE，

我已经更改了如下的选择器和事件

$(document).ready(function () {
    $('.divcontainer').click(function () {
        $(this).find("span:eq(1)")
            .toggleClass('glyphicon-chevron-down')
            .toggleClass("glyphicon-chevron-up");
    });
});

希望对你有帮助

【讨论】：

@IamRaviteja 如果它解决了问题，您可以接受它作为答案。
你检查过小提琴吗？详细说明问题。
我的项目中有很多可折叠的部分。我需要找到一个特定的部分并在点击 glyphicon 时折叠使用
为什么不根据上面的 cmets 更新具有场景的标记？

【解决方案5】：

使用下面的 jquery 代码并根据需要更改字形图标名称

<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>

【讨论】：