我使用jquery slideToggle()作为我的菜单。
我有一个问题。
switchClass()为什么不行?我需要使用它来更改:after
和:before
内容
$(".left > ul > li>a").click(function () {
$(this).next(".sub").slideToggle();
$(".hov").switchClass("hov", "down", 1000);
$(".down").switchClass("down", "hov", 1000);
});
<div class="left">
<ul>
<li><a href="#">Home</a></li>
<li class="opened">
<a class="hov">User</a>
<ul class="sub">
<li><a href="#">add</a></li>
<li><a href="#">search</a></li>
<li><a href="#">delete</a></li>
</ul>
</li>
<li>
<a class="down">Record</a>
<ul class="sub">
<li><a href="#">add</a></li>
<li><a href="#">search</a></li>
<li><a href="#">delete</a></li>
</ul>
</li>
<li><a href="#">Test</a></li>
</ul>
主要观点css:
.left ul li a:after {
font-family: FontAwesome;
float: right;
margin-right: 8px;
}
.left ul li a.hov:after {
content:"\f105";
}
.left ul li a.down:after {
content:"\f107";
}
答案 0 :(得分:3)
此示例可能会帮助您fiddle
$(".left > ul > li > a").click(function () {
$(this).siblings(".sub").slideToggle();
if( $(this).hasClass("hov") || $(this).hasClass("down") ) {
$(this).toggleClass("hov down");
}
});