首次单击时，折叠图标不会更改

Question

我需要设置折叠图标，所以当我点击图标或标题时打开折叠并旋转图标90deg。我这样做，但问题是当我们第一次加载网页并点击标题或图标时它们没有改变，但在第二次和任何其他点击它们工作。请看一下代码。为什么这不起作用？日Thnx

.footerMenuMobile .fa {
    transition: .3s transform ease-in-out;
  }
.footerMenuMobile .collapsed .fa {
    transform: rotate(-90deg);
  }
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="footerContent">
<div class="row footer_menu">
  <div class="container footer_menu_container">
    <div id="collapseSeconMenu" class="row col-lg-12 col-md-12 col-sm-12 col-12 linkovi_footer wow fadeInDown">
      <div class="col-lg-12 col-md-12 col-sm-12 col-12 footerMenuMobile text-left">
        <a class="nasloviFootera" data-toggle="collapse" href="#collapseS" aria-expanded="true">
          Test <i class="fa fa-chevron-left pull-right"></i>
        </a>
        <div id="collapseS" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 collapse">
          <ul class="footer_menu_list">
            <li><a href="standard" class="openSansLightFont">Test</a></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-12 col-md-12 col-sm-12 col-12 footerMenuMobile text-left">
        <a class="nasloviFootera" data-toggle="collapse" href="#collapseDashboard" aria-expanded="true">
              Test1 <i class="fa fa-chevron-left pull-right"></i>
            </a>
        <div id="collapseDashboard" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 collapse">
          <ul class="footer_menu_list">
            <li><a href="dashboard" class="openSansLightFont">Test1</a></li>
            <li><a href="#" class="openSansLightFont" target="_blank">Test1</a></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-12 col-md-12 col-sm-12 col-12 footerMenuMobile text-left">
        <a class="nasloviFootera" data-toggle="collapse" href="#collapseTechnology" aria-expanded="true">
              Test2 <i class="fa fa-chevron-left pull-right"></i>
            </a>
        <div id="collapseTechnology" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 collapse">
          <ul class="footer_menu_list">
            <li><a class="openSansLightFont">Test2</a></li>
            <li><a class="openSansLightFont">Test2</a></li>
          </ul>
        </div>
      </div>

    </div>

  </div>
</div>

</div>

Answer 1

手风琴内容中省略了必需的类，此类为<div id="collapseS" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 collapse in">...</div> ，例如：

.in

此类需要在加载时出现，以便在第一次单击时观察预期的行为;只有在第一次点击时才添加.collapse()这个类，应该删除它。

这将打开所有手风琴。
为避免这种情况，请考虑在页面加载时添加以下$('.collapse').collapse({ hide: true }); methods以启动：

$('.collapse').collapse({
  toggle: true
})

或

.footerMenuMobile .nasloviFootera:not(.collapsed) .fa {
  transform: rotate(-90deg);
}

然后，为了避免在上述脚本运行后切换图标，请考虑声明以下规则：

.footerMenuMobile .nasloviFootera[aria-expanded="true"] .fa {
  transform: rotate(-90deg);
}

或

/*$('.collapse').collapse({
  hide: true
});*/

/** OR **/

$('.collapse').collapse({
  toggle: true
})

代码段示范：

＆＃13;

＆＃13;

.footerMenuMobile .fa {
  transition: .3s transform ease-in-out;
}

.footerMenuMobile .nasloviFootera:not(.collapsed) .fa {
  transform: rotate(-90deg);
}
/** OR **/
.footerMenuMobile .nasloviFootera[aria-expanded="true"] .fa {
  transform: rotate(-90deg);
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div id="footerContent">
  <div class="row footer_menu">
    <div class="container footer_menu_container">
      <div id="collapseSeconMenu" class="row col-lg-12 col-md-12 col-sm-12 col-12 linkovi_footer wow fadeInDown">
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 footerMenuMobile text-left">
          <a class="nasloviFootera collapsed" data-toggle="collapse" href="#collapseS" aria-expanded="false">
          Test <i class="fa fa-chevron-left pull-right"></i>
        </a>
          <div id="collapseS" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 collapse in">
            <ul class="footer_menu_list">
              <li><a href="standard" class="openSansLightFont">Test</a></li>
            </ul>
          </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 footerMenuMobile text-left">
          <a class="nasloviFootera" data-toggle="collapse" href="#collapseDashboard" aria-expanded="false">
              Test1 <i class="fa fa-chevron-left pull-right"></i>
            </a>
          <div id="collapseDashboard" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 collapse in">
            <ul class="footer_menu_list">
              <li><a href="dashboard" class="openSansLightFont">Test1</a></li>
              <li><a href="#" class="openSansLightFont" target="_blank">Test1</a></li>
            </ul>
          </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 footerMenuMobile text-left">
          <a class="nasloviFootera" data-toggle="collapse" href="#collapseTechnology" aria-expanded="false">
              Test2 <i class="fa fa-chevron-left pull-right"></i>
            </a>
          <div id="collapseTechnology" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 collapse in">
            <ul class="footer_menu_list">
              <li><a class="openSansLightFont">Test2</a></li>
              <li><a class="openSansLightFont">Test2</a></li>
            </ul>
          </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 footerMenuMobile text-left">
          <a class="nasloviFootera" data-toggle="collapse" href="#collapseTechnologyq" aria-expanded="false">
              Test3 <i class="fa fa-chevron-left pull-right"></i>
            </a>
          <div id="collapseTechnologyq" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 collapse in">
            <ul class="footer_menu_list">
              <li><a class="openSansLightFont">Test2</a></li>
              <li><a class="openSansLightFont">Test2</a></li>
            </ul>
          </div>
        </div>

      </div>

    </div>
  </div>

</div>

＆＃13;

Cargo.toml
src/
  lib.rs
dep1/
  Cargo.toml
  src/
    lib.rs
dep2/
  Cargo.toml
  src/
    lib.rs

＆＃13;

＆＃13;

＆＃13;

参考： Collapse: Bootstrap