我想在打开的子菜单上将字体真棒更改为fa-angle-down
,然后将fa-angle-left
放回到已折叠的子菜单上。
HTML和CSS:
.sidenav li .arrow:before {
font-size: 1.4em;
padding-left: 10px;
padding-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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"/>
<li data-toggle="collapse" data-target="#SubMenuTools" class="collapsed">
<a href="#/"><i class="fa fa-tasks fa-fw"></i> External Tools <span class="arrow pull-right fa fa-angle-left"></span></a>
</li>
<ul class="sub-menu collapse" id="SubMenuTools">
<li><a href="">First tool</a></li>
<li><a href="">Second Tool</a></li>
</ul>
&#13;
怎么样?应该是CSS还是jQuery?
答案 0 :(得分:2)
您可以使用与transform
配对的transition
。这将比使用JS简单地将.fa-angle-left
替换为.fa-angle-down
创建更好的效果。
.sidenav li .arrow {
transition: transform .25s;
}
.sidenav li.collapsed .arrow {
transform: rotate(90deg);
}
答案 1 :(得分:1)
使用jQuery:
$('a').on('click', function() {
var expanded = $('#SubMenuTools').hasClass("in");
if (expanded == true) {
$('#arrow').removeClass("fa-angle-down");
$('#arrow').addClass("fa-angle-left");
}
else {
$('#arrow').removeClass("fa-angle-left");
$('#arrow').addClass("fa-angle-down");
}
});
.sidenav li .arrow:before {
font-size: 1.4em;
padding-left: 10px;
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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"/>
<li data-toggle="collapse" data-target="#SubMenuTools" class="collapsed">
<a href="#/">
<i class="fa fa-tasks fa-fw"></i>
<span>External Tools</span>
<i class="fa fa-angle-left" id='arrow'></i>
</a>
</li>
<ul class="sub-menu collapse" id="SubMenuTools">
<li><a href="">First tool</a>
</li>
<li><a href="">Second Tool</a>
</li>
</ul>
答案 2 :(得分:1)
您可以使用以下JQuery示例。
$(document).ready(function() {
var expand = false;
$("#mainMenu").click(function() {
expand = !expand;
if (expand) {
$(this).children("span").removeClass().addClass("fa fa-angle-down");
} else {
$(this).children("span").removeClass().addClass(" fa fa-angle-left");
}
});
});