Jquery switchClass不起作用

时间:2015-01-01 19:26:11

标签: jquery

http://jsfiddle.net/b5e9xhas/

我使用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";
}

1 个答案:

答案 0 :(得分:3)

此示例可能会帮助您fiddle

$(".left > ul > li > a").click(function () {
    $(this).siblings(".sub").slideToggle();
    if( $(this).hasClass("hov") || $(this).hasClass("down") ) {
        $(this).toggleClass("hov down");
     }
});