javascript - 根据折叠元素是否打开更改字形 - Bootstrap

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。您可以使用该类来定位字形。

您还应该默认将 .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>