Question

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

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

    <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，因为默认状态已折叠，但在您单击以触发折叠之前，该类不会应用。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用toggleClass的jquery解决方案。

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

Answer 3

以下是崩溃事件。

show.bs.collapse 此节目在节目播出时立即触发调用instance方法。
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>

根据是否打开折叠元素更改glyphicon - Bootstrap

3 个答案: