Bootstrap手风琴图标不会动态变化

Question

我正在尝试将bootstrap Accordion添加到我的项目中，但它无法正常工作....我在下面添加了JavaScript代码的问题是什么。

我还在我的项目中包含以下文件。 提前致谢。 问候。

<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
            <div id="accordion" class="panel-group">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
                                <span class="glyphicon glyphicon-collapse-up"></span>
                                Fabric
                            </a>
                        </h4>
                    </div>
                    <div id="fabricBody" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul>
                                <li><a href="#">Wash n Wear</a></li>
                                <li><a href="#">Cotton</a></li>
                                <li><a href="#">Silk</a></li>
                                <li><a href="#">Stone Wash</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
                                <span class="glyphicon glyphicon-collapse-down"></span>
                              Price

                            </a>
                        </h4>
                    </div>
                    <div id="priceBody" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul>
                                <li><a href="#">3120 to 4680</a></li>
                                <li><a href="#">4681 to 6240</a></li>
                                <li><a href="#">Above 6240</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
                                <span class="glyphicon glyphicon-collapse-down"></span>Men Dresses

                            </a>
                        </h4>
                    </div>
                    <div id="menDressesBody" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul>
                                <li><a href="#">Classic Sherwani</a></li>
                                <li><a href="#">Modern Sherwani</a></li>
                                <li><a href="#">Prince Suit</a></li>
                                <li><a href="#">Mens Shalwar Kameez</a></li>
                                <li><a href="#">WaistCoat Suits</a></li>
                                <li><a href="#">Mens Turbans</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </div>
        </div>



<script type="text/javascript">
        $(document).ready(function () {
            $('.collapse').on('shown.bs.collapse', function () {
                $(this).parent().find('.glyphicon-collapse-down').removeClass('.glyphicon-collapse-down')
            }).on('hidden.bs.collapse', function () {
                $(this).parent().find('..glyphicon-collapse-up').removeClass('.glyphicon-collapse-up').addClass('.glyphicon-collapse-down');
            });
        });
    </script>

Answer 1

为了改变我想建议使用的手风琴图标：

• .toggleClass()，以便将图标从向下更改为向上，反之亦然，
• show.bs.collapse活动
• hide.bs.collapse活动

$(document).ready(function () {
  $('.collapse').on('show.bs.collapse hide.bs.collapse', function () {
      $(this).closest('.panel').find('.panel-heading .glyphicon').toggleClass('glyphicon-collapse-down glyphicon-collapse-up')
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
            <div id="accordion" class="panel-group">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
                                <span class="glyphicon glyphicon-collapse-down"></span>
                                Fabric
                            </a>
                        </h4>
                    </div>
                    <div id="fabricBody" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul>
                                <li><a href="#">Wash n Wear</a></li>
                                <li><a href="#">Cotton</a></li>
                                <li><a href="#">Silk</a></li>
                                <li><a href="#">Stone Wash</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
                                <span class="glyphicon glyphicon-collapse-down"></span>
                                Price

                            </a>
                        </h4>
                    </div>
                    <div id="priceBody" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul>
                                <li><a href="#">3120 to 4680</a></li>
                                <li><a href="#">4681 to 6240</a></li>
                                <li><a href="#">Above 6240</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
                                <span class="glyphicon glyphicon-collapse-down"></span>Men Dresses

                            </a>
                        </h4>
                    </div>
                    <div id="menDressesBody" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul>
                                <li><a href="#">Classic Sherwani</a></li>
                                <li><a href="#">Modern Sherwani</a></li>
                                <li><a href="#">Prince Suit</a></li>
                                <li><a href="#">Mens Shalwar Kameez</a></li>
                                <li><a href="#">WaistCoat Suits</a></li>
                                <li><a href="#">Mens Turbans</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

您可以查找上一个元素，并找到类.glyphicon的范围。 然后只需添加或删除上下类。

这是一个例子。

$('.collapse')
  .on('show.bs.collapse', function () {
  $(this).prev().find('.glyphicon')
    .removeClass('glyphicon-collapse-down')
    .addClass('glyphicon-collapse-up')
})
  .on('hide.bs.collapse', function () {
  $(this).prev().find('.glyphicon')
    .removeClass('glyphicon-collapse-up')
    .addClass('glyphicon-collapse-down')
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
      <div id="accordion" class="panel-group">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
                <span class="glyphicon glyphicon-collapse-up"></span>
                Fabric
              </a>
            </h4>
          </div>
          <div id="fabricBody" class="panel-collapse collapse in">
            <div class="panel-body">
              <ul>
                <li><a href="#">Wash n Wear</a></li>
                <li><a href="#">Cotton</a></li>
                <li><a href="#">Silk</a></li>
                <li><a href="#">Stone Wash</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="panel panel-primary">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
                <span class="glyphicon glyphicon-collapse-down"></span>
                Price

              </a>
            </h4>
          </div>
          <div id="priceBody" class="panel-collapse collapse">
            <div class="panel-body">
              <ul>
                <li><a href="#">3120 to 4680</a></li>
                <li><a href="#">4681 to 6240</a></li>
                <li><a href="#">Above 6240</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="panel panel-primary">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
                <span class="glyphicon glyphicon-collapse-down"></span>Men Dresses

              </a>
            </h4>
          </div>
          <div id="menDressesBody" class="panel-collapse collapse">
            <div class="panel-body">
              <ul>
                <li><a href="#">Classic Sherwani</a></li>
                <li><a href="#">Modern Sherwani</a></li>
                <li><a href="#">Prince Suit</a></li>
                <li><a href="#">Mens Shalwar Kameez</a></li>
                <li><a href="#">WaistCoat Suits</a></li>
                <li><a href="#">Mens Turbans</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

请参阅此链接。 http://jsfiddle.net/panchroma/3gYa3/

仅使用CSS的Bootstrap手风琴

.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
content: "\e114";    /* adjust as needed, taken from bootstrap.css */
float: right;        /* adjust as needed */
color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}