Question

打开子菜单时，我有一个类应用于“子菜单 - 单击”div。当打开另一个子菜单时，脚本会关闭前一个子菜单，但是我还需要它来删除应用于上一个子菜单的“子菜单打开”类 - 但是没有将类删除到打开的新子菜单

    $('.sub-menu-click').click(function(){ 
    $(this).next(".sub-menu").slideToggle(250);
    $(this).addClass("sub-menu-open");
    $(this).parent().parent().children().children().not($(this)).next('.sub-menu').slideUp(250);
    return false;
});

        <ul id="nav">
        <li>
            <a href="dashboard.php">Dashboard</a>
        </li>

        <li>
            <div class="sub-menu-click">Clients</div>
            <ul class="sub-menu">
                <li><a href="lookup-clients.php"><i class="fa fa-angle-right"></i>Lookup Clients</a></li>
                <li><a href="create-a-client.php"><i class="fa fa-angle-right"></i>Create a Client</a></li>
            </ul>
        </li>

        <li>
            <div class="sub-menu-click">Properties</div>
            <ul class="sub-menu">
                <li><a href="lookup-properties.php"><i class="fa fa-angle-right"></i>Lookup Properties</a></li>
                <li><a href="create-a-property.php"><i class="fa fa-angle-right"></i>Create a Property</a></li>
            </ul>
        </li>

        <li>
            <div class="sub-menu-click">Appointments</div>
            <ul class="sub-menu">
                <li><a href="lookup-appointments.php"><i class="fa fa-angle-right"></i>Lookup Appointments</a></li>
                <li><a href="book-an-appointment.php"><i class="fa fa-angle-right"></i>Book an Appointment</a></li>
            </ul>
        </li>

        <li>
            <div class="sub-menu-click">Inventories</div>
            <ul class="sub-menu">
                <li><a href="lookup-inventories.php"><i class="fa fa-angle-right"></i>Lookup Inventories</a></li>
                <li><a href="create-an-inventory-1.php"><i class="fa fa-angle-right"></i>Create an Inventory</a></li>
            </ul>
        </li>

        <li>
            <div class="sub-menu-click">Check-Ins</div>
            <ul class="sub-menu">
                <li><a href="lookup-check-ins.php"><i class="fa fa-angle-right"></i>Lookup Check-Ins</a></li>
                <li><a href="create-a-check-in.php"><i class="fa fa-angle-right"></i>Create a Check-In</a></li>
            </ul>
        </li>

        <li>
            <div class="sub-menu-click">Check-Outs</div>
            <ul class="sub-menu">
                <li><a href="lookup-check-outs.php"><i class="fa fa-angle-right"></i>Lookup Check-Outs</a></li>
                <li><a href="create-a-check-out.php"><i class="fa fa-angle-right"></i>Create a Check-Out</a></li>
            </ul>
        </li>

    </ul>

Answer 1

试试这个

$('.sub-menu-click').click(function(){
    $(this).next('.sub-menu').slideToggle(250);
    $(this).toggleClass('sub-menu-open');
});

它将切换类和幻灯片以实现结果

Answer 2

试试这个：

$('.sub-menu-click').click(function(){
    $('.sub-menu-click').next(".sub-menu").slideUp(250);
    $('.sub-menu-click').removeClass('sub-menu-click');
    $(this).next(".sub-menu").slideToggle(250);
    $(this).addClass("sub-menu-open");
});

Answer 3

$('.sub-menu-click').click(function(){
    $("sub-menu-open").removeClass("sub-menu-open"); 
    $(this).next(".sub-menu").slideToggle(250);
    $(this).addClass("sub-menu-open");
    $(this).parent().parent().children().children().not($(this)).next('.sub-menu').slideUp(250);
    return false;
});

jQuery删除slideUp上的类

3 个答案: