使用 bootstrap 折叠切换字形

Question

当div处于collapsed状态时，我有glyphicon-chevron-down，当div处于[=16]时，我想用glyphicon-chevron-up替换它=] state.I 在我的 project.So 中有许多这样的 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");
    });
});

Fiddle here

Answer 1

使用下面的 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>

Answer 2

您需要同时切换 class 和 chevron-up 和 chevron-down。您可以使用更通用的 glyphicon class.

找到正确的 div

我在div里也加了id，所以不用downclass

找

参见：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/

Answer 3

试试 FIDDLE,

我已经像下面这样更改了选择器和事件

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

希望对您有所帮助

Answer 4

你的 JS 强调了错误的事情。 Find 非常慢，如果可能的话最好避免——这里很有可能。只需将其更改为：

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

JS Fiddle: http://jsfiddle.net/ft4mnynh/

Answer 5

以下代码对我有用。据我所知，bootstrap js 事件仅在 "div.collapse" 元素上触发，即隐藏和显示的块。甚至 "div.panel-heading" 或任何 child 上的 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");
    });
});

使用 bootstrap 折叠切换字形

Toggle the glyphicon with bootstrap collapse

html

javascript

jquery

twitter-bootstrap

glyphicons