【问题标题】：Collapse icon does not change on first click折叠图标在第一次点击时不会改变
【发布时间】：2018-01-04 20:09:34
【问题描述】：
我需要设置折叠图标，所以当我点击图标或标题时打开折叠并将图标旋转 90 度。我这样做了，但问题是当我们第一次加载网页并单击标题或图标时，它们不会改变，但在第二次和任何其他单击时它们都会起作用。请看一下代码。为什么这不起作用？谢谢
.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>
【问题讨论】：
标签：
html
css
twitter-bootstrap
font-awesome
【解决方案1】：
手风琴内容中省略了一个必需的类，该类是.in，例如：
<div id="collapseS" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 collapse in">...</div>
这个类需要在加载时出现，以便观察第一次点击时的预期行为；只有在第一次点击时才会添加这个类，.in，当它应该被删除时。
这将加载所有打开的手风琴。
要避免这种情况，请考虑添加以下 .collapse() methods 以在页面加载时启动：
$('.collapse').collapse({
hide: true
});
或
$('.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
})
.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);
}
<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>
参考：Collapse: Bootstrap