根据是否打开折叠元素更改字形图标 - 引导

Question

我想知道如何根据是否打开折叠元素来更改字形图标。

到目前为止，我有这段代码：

<div class="jumbotron ref" data-toggle="collapse" data-target="#collapse">
<div class="row">
<div class="col-md-11">
<a target="_blank" href="#"><h4 align="center">Click me.</h4></a>
</div>
<div class="col-md-1">
<span class="glyphicon glyphicon-chevron-down"> <!-- part to change-->

    

<div id="collapse" class="collapse">
<p style="margin-top: 75px;" align="center"></p>
</div>

        

Answer 1

.jumbotron

在折叠菜单时获取类.collapsed。可以使用该类来定位字形。

默认情况下，还应向.jumbotron添加.collapsed，因为默认状态为折叠状态，但在单击以触发类折叠之前，不会应用该类。

.jumbotron.collapsed .glyphToChange {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron ref collapsed" data-toggle="collapse" data-target="#collapse">
<div class="row">
<div class="col-md-11">
<a target="_blank" href="#"><h4 align="center">Click me.</h4></a>
</div>
<div class="col-md-1">
<span class="glyphicon glyphToChange glyphicon-chevron-down">glyph</span>
<div id="collapse" class="collapse">
<p style="margin-top: 75px;" align="center"></p>
</div>

Answer 2

一个使用 toggleClass 的 jquery 解决方案。

$( ".jumbotron" ).click(function() {
$( ".glyphicon" ).toggleClass( glyphicon-chevron-down, glyphicon-chevron-up );
});

Answer 3

以下是崩溃事件。

1. show.bs.collapse此事件在显示时立即触发 调用实例方法。
2. 显示.bs.折叠触发此事件 当折叠元素对用户可见时(将等待 以完成 CSS 过渡(。

3. hide.bs.collapse此事件是 调用隐藏方法后立即触发。

4. hidden.bs.collapse当折叠元素具有 对用户隐藏(将等待 CSS 过渡到 完成(。

$('#collapse').on('hidden.bs.collapse', function () {
$(".glyphicon.glyphToChange").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}).on('shown.bs.collapse', function () {
$(".glyphicon.glyphToChange").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron ref collapsed" data-toggle="collapse" data-target="#collapse">
<div class="row">
<div class="col-md-11">
<a target="_blank" href="#"><h4 align="center">Click me.</h4></a>
</div>
<div class="col-md-1">
<span class="glyphicon glyphToChange glyphicon-chevron-down">glyph</span>
<div id="collapse" class="collapse">
<p style="margin-top: 75px;" align="center"></p>
</div>