崩溃时Twitter Twitter引导3.0图标更改 [英] Twitter bootstrap 3.0 icon change on collapse

问题描述

这是关于Bootstrap 3.0的。
我希望图标/ glyphicon在崩溃时更改。即，从一个封闭的文件夹到一个打开的文件夹。

This is about Bootstrap 3.0. I would like the icon/glyphicon to change on collapse. I.e, from a closed folder to an open one.

我已经搜索了很多，并且已经在SO上阅读了这些帖子，但无济于事。 这个帖子很接近，基本上就是我想。如何在Bootstrap 3中使其工作？

I have searched far and wide, and have read threads here on SO, but to no avail. This thread was close, and is basically what I want. How can I make it work in Bootstrap 3?

推荐答案

此代码会找到ID为Accordion的手风琴。当显示的事件在折叠面板上触发时，在标题面板（上一个元素）中找到该图标，它会在该HTML代码块中查找并更改您的标志符号图标元素：

This code finds your accordion with the ID of 'Accordion'. When the shown event fires on the collapsed panel, the icon is found in the header panel (the previous element) and it finds and changes your glyph icon element within that HTML code block:

$('#accordion .panel-collapse').on('shown.bs.collapse', function () {
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
});

//The reverse of the above on hidden event:

$('#accordion .panel-collapse').on('hidden.bs.collapse', function () {
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
});

这篇关于崩溃时Twitter Twitter引导3.0图标更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！