1

打开子菜单时，我将一个类应用于“子菜单单击” 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>
4

3 回答 3

2

尝试这个

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

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

于 2013-11-11T08:52:12.350 回答
0

尝试这个：

$('.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");
});
于 2013-11-10T10:23:07.460 回答
-1 
$('.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;
});
于 2013-11-10T10:21:11.540 回答