jquery – 根据Div是否打开添加和删除类

2024年1月29日 219次阅读

我有这个
HTML与以下jQuery：

<nav class="navigation">
    <ul>
        <li class="has-sub">iPad <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="iPadAir2.php">iPad Air 2 Review</a></li>
                <li><a href="iPadAir.php">iPad Air Review</a></li>
                <li><a href="iPadMini2.php">iPad mini 2 Review</a></li>
            </ul>
        </li>
        <li class="has-sub">iPhone <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="iPhone6.php">iPhone 6 Review</a></li>
                <li><a href="iPhone5s.php">iPhone 5s Review</a></li>
                <li><a href="iPhone5c.php">iPhone 5c Review</a></li>
                <li><a href="iPhone5.php">iPhone 5 Review</a></li>
                <li><a href="iPhone4s.php">iPhone 4s Review</a></li>
            </ul>
        </li>
        <li class="has-sub">Mac <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="MacBook.php">MacBook Review</a></li>
                <li><a href="MacBookProRetina.php">MacBook Pro w/ Retina display Review</a></li>
                <li><a href="MacBookPro.php">MacBook Pro Review</a></li>
                <li><a href="MacBookAir.php">MacBook Air Review</a></li>
            </ul>
        </li>
    </ul>
</nav>

$(document).ready(function() {
    $(".has-sub").click(function() {
        $(this).find(".sub-menu").slideToggle(500);
        $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500);
    });
});

你可以看到我有一类fa-angle-down.单击时,li打开但我想删除fa-angle-down类并向i类添加一类fa-angle-up.有人可以告诉我如何做到这一点？

谢谢.

编辑：

下面的导航CSS.

nav {
    background : #034893;
    height : 50px;
}

nav ul,
nav li,
nav a { 
    margin : 0; 
    padding : 0;
}

nav > ul > li {
    color : white;
    display : block;
    float : left;
    font-size : 18px;
    line-height : 50px;
    position : relative;
    transition : all .3s linear;
    width : 25%;
    z-index : 999;
}

nav > ul > li:hover {
    background : #88bffc;
    color : #333;
    cursor : pointer;
}

nav > ul > li > ul {
    background : #034893;
    left : 0;
    margin : 0 auto;
    position : absolute;
    right : 0;
    text-align : left;
}

nav ul ul a {
    color : white;
    display : block;
    font-size : 14px;
    padding : 6px 12px;
}

nav ul ul a:hover {
    background : #88bffc;
}

最佳答案 EDITED这有效,检查类是否在DOM中切换.

编辑只是初始切换.fa类,它为点击的菜单项打开/关闭向下/向上.

$(".has-sub").click(function(e) {
    e.preventDefault;
    $this = $(this);
    $this.find(".sub-menu").slideToggle(500);
    $this.siblings(".has-sub").not(this).find(".sub-menu").slideUp(500);
    $this.find(".fa").toggleClass('fa-angle-down fa-angle-up');
    $this.siblings(".has-sub").not(this).find(".fa-angle-up").toggleClass('fa-angle-up fa-angle-down');
});
点赞