twitter-bootstrap 使用引导程序折叠切换字形

Toggle the glyphicon with bootstrap collapse

提问by Raviteja

I have glyphicon-chevron-downwhen div is in collapsedstate,i want to replace it with glyphicon-chevron-upwhen the div is in collapse instate.I have many of these collapsibledivs in my project.So i need to togglethe glyphiconon press of particular collapsibe content(or div).

我有glyphicon-chevron-down当DIV中collapsed的状态，我想取代它glyphicon-chevron-up时，DIV是collapse instate.I有许多的collapsible申报单在我project.So我需要toggle的glyphicon对特定collapsibe内容（或DIV）按。

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

Fiddle here

在这里摆弄

回答by Chuck Le Butt

Your JS is putting an emphasis on the wrong thing. Findis very slow and best avoided if possible -- and it's very possible here. Just change it to this:

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

$(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/

回答by Mayank

Try the FIDDLE,

试试小提琴，

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

希望这可以帮助

回答by GunvantParmar

Use this below jquery code and just change glyphicon name as you wish

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

回答by Igal S.

You need to toggle both classes chevron-upand chevron-down. You can find the correct div using the more general glyphiconclass.

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

I also added id to the div, so you don't need to find it by the downclass

我还在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/

回答by David Fuller

The following code worked for me. As far as I can tell the bootstrap js events only fire on the "div.collapse" element, i.e., the hidden and shown block(s). Even the jquery "click" event on "div.panel-heading" or any child was unresponsive.

以下代码对我有用。据我所知，bootstrap 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");
    });
});