Jquery Twitter bootstrap 3.0图标在崩溃时更改

这是关于Bootstrap3.0的。 我希望图标/字形图标在折叠时更改。也就是说，从一个关闭的文件夹到一个打开的文件夹

---

我到处找了找，在这里读了很多文章，但都没有用。基本上就是我想要的。如何使其在Bootstrap 3中工作？

在Bootstrap 3中，

折叠事件的处理方式不同。现在应该是这样的：

$('#collapseDiv').on('shown.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");
});

$('#collapseDiv').on('hidden.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
});

.navbar-toggle.mobile-close {    
  cursor: pointer;
  width: 42px;
  height: 32px;
  line-height: 40px;
}
.navbar-toggle.mobile-close:before {
  content: "×";
  font-size: 40px;
  color: #231f20;
 }

演示：
此代码查找ID为“accordion”的手风琴。当显示的事件在折叠的面板上激发时，图标会在标题面板（上一个元素）中找到，它会在该HTML代码块中查找并更改glyph-icon元素：

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

您还可以使用类作为目标，而不是id

 <a data-toggle="collapse" href=".details">
     <div class="details collapse in">Show details</div> 
     <div class="details collapse">Hide details</div> 
 </a>
 <div class="details collapse">
 ...
 </div>


...
用于引导折叠加号和减号按钮

HTML

<div>
  <a data-toggle="collapse" href="#other">
    <h3>Others<span class="pull-right glyphicon glyphicon-plus"></span></h3>
  </a>
  <div id="other" class="collapse">
    <h1>Others are</h1>
  </div>
</div>

崩溃事件的处理方式如下：

$('#collapse').on('shown.bs.collapse', function () {
   $(".glyphicon")
      .removeClass("glyphicon-folder-close")
      .addClass("glyphicon-folder-open");
 });

 $('#collapse').on('hidden.bs.collapse', function () {
    $(".glyphicon")
       .removeClass("glyphicon-folder-open")
       .addClass("glyphicon-folder-close");
 });

以下是我的解决方案：

$('.navbar-toggle').on('click', function() {
    $(this).toggleClass('mobile-close');
})

隐藏默认图标栏：

.mobile-close span {
  display: none !important;
}

然后您可以设置mobile close的样式，例如：

$('#collapseDiv').on('shown.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");
});

$('#collapseDiv').on('hidden.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
});

.navbar-toggle.mobile-close {    
  cursor: pointer;
  width: 42px;
  height: 32px;
  line-height: 40px;
}
.navbar-toggle.mobile-close:before {
  content: "×";
  font-size: 40px;
  color: #231f20;
 }

这是一个基于CSS的解决方案，它依赖于默认的bootstrap.js折叠实现。不需要额外的HTML标记（当然，可以用GlyphIcon替换Font Awesome）


.面板标题>a:之前{
字体系列：Fontsome；
内容：“\f07c”；
右侧填充：5px；
}
.面板标题>a.折叠：之前{
内容：“\f07b”；
}


这一个在引导崩溃时工作正常：

<script>
    $(document).ready(function () {
        $('#collapseExample').on('hidden.bs.collapse', function () {
            $("#btnDown").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
            })
        $('#collapseExample').on('shown.bs.collapse', function () {
            $("#btnDown").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
            })
        });
</script>


$（文档）.ready（函数（）{
$（'#collapseExample'）。on（'hidden.bs.collapse'，function（）{
$（“#btnDown”）.removeClass（“字形图标V形向上”）.addClass（“字形图标V形向下”）；
})
$（'#collapseExample'）。on（'show.bs.collapse'，function（）{
$（“#btnDown”）.removeClass（“字形图标向下”）.addClass（“字形图标向上”）；
})
});

这是我使用的HTML代码：

<div class="collapse" id="collapseExample">
     <div class="well">
     ...
     </div>
</div>
<button class="btn btn-default" type="button" data-toggle="collapse" data-         target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
     <span id="btnDown" class="glyphicon glyphicon-chevron-down"></span>
     Settings
</button>


...
设置
仅使用CSS，可以使用预定义图标更改引导折叠图标：


a[aria expanded=true].glyphicon plus{
显示：无；
}
a[aria EXPENDED=false]。符号图标减号{
显示：无；
}
.指针{
光标：指针；
}




在引导中使用图标折叠多个div的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Accordion with Plus/Minus Icon</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
    .panel-title .glyphicon{
        font-size: 14px;
    }
</style>
<script>
    $(document).ready(function(){
        // Add minus icon for collapse element which is open by default
        $(".collapse.in").each(function(){
            $(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus");
        });

        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function(){
            $(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hide.bs.collapse', function(){
            $(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
    });
</script>
</head>
<body>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-plus"></span> What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-plus"></span> What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
    <p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p>
</div>
</body>
</html>      


带加号/减号图标的Bootstrap 3手风琴示例
.bs示例{
利润率：20px；
}
.面板标题.图示图标{
字体大小：14px；
}
$（文档）.ready（函数（）{
//为默认打开的折叠元素添加减号图标
$（“.collapse.in”）.each（函数（）{
$（this）.sides（“.panel heading”）.find（“.glyphicon”）.addClass（“glyphicon-minus”）.removeClass（“glyphicon-plus”）；
});
//在显示折叠元素的隐藏时切换加减图标
$（“.collapse”）.on（'show.bs.collapse'，function（）{
$（this）.parent（）.find（“.glyphicon”）.removeClass（“glyphicon plus”）.addClass（“glyphicon减号”）；
}).on（'hide.bs.collapse'，function（）{
$（this）.parent（）.find（“.glyphicon”）.removeClass（“glyphicon-minus”）.addClass（“glyphicon-plus”）；
});
});
HTML代表超文本标记语言。HTML是描述网页结构的标准标记语言

Bootstrap是一个圆滑、直观、功能强大的前端框架，用于更快、更简单的web开发。它是CSS和HTML约定的集合

CSS代表级联样式表。CSS允许您为给定的HTML元素指定各种样式属性，例如颜色、背景、字体等

注意：单击链接的标题文本以展开或折叠手风琴面板

太棒了！快到了！但它似乎把我所有的其他按钮都搞乱了：-S..这不是一个有用的评论：当我点击我的文件夹关闭时，所有其他按钮也会打开一个文件夹。将函数中的
$（“.glyphicon”）
选择器更改为特定按钮的id属性，如
$（“#myBtn”）.removeClass..
在您发布的第二天，我就明白了：-）非常感谢，感谢您抽出时间。非常快！好代码。如果您是复制粘贴，请注意，引导示例使用的是#accordion，而不是#accordion。搜索了一个小时后，我终于找到了解决方案！非常感谢，伙计！：）这比“正确”答案更有效，因为它可以找到直接折叠的目标。“正确”答案将找到页面上每个折叠的元素，并更改所有内容的图标。谢谢我认为这里要补充的一件重要事情是，这是一个通用的良好实践，可以对show.bs.collapse的事件做出反应，而不是像我在其他地方看到的那样对单击事件本身做出反应。然后确保只有在孔折叠/展开后图标才会更新。这是一个很好的解决方案，可以减少入侵。请注意，默认行为包括转换，在切换过程中，您将短暂看到这两种状态。您可以添加自定义css，例如，
#someParent。折叠：第一个子项{display:none；}
作为解决方法。简单的回答很好，可以轻松应用于同一页面上的多个折叠区域。简单又漂亮！我最喜欢这个解决方案。虽然我