根据折叠元素是否打开来更改字形图标 - Bootstrap答案

【问题标题】：Change glyphicon depending on if collapse element is opened - Bootstrap根据折叠元素是否打开来更改字形图标 - Bootstrap
【发布时间】：2017-07-22 17:05:16
【问题描述】：

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

到目前为止，我已经得到了这个代码：

    <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>

【问题讨论】：

抱歉代码乱七八糟，好像它喜欢带走我的代码。只是不要太在意缺少的 div

标签： javascript html css bootstrap-4

【解决方案1】：

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

您还应该默认将.collapsed 添加到.jumbotron，因为默认状态是折叠的，但是在您单击触发它折叠之前不会应用该类。

.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>

【讨论】：

【解决方案2】：

使用 toggleClass 的 jquery 解决方案。

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

【讨论】：

【解决方案3】：

以下是折叠事件。

show.bs.collapse 这个事件会在显示时立即触发实例方法被调用。
shown.bs.collapse 触发此事件当折叠元素对用户可见时（将等待用于完成 CSS 过渡）。
hide.bs.collapse 这个事件是调用 hide 方法时立即触发。
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>

【讨论】：