边菜单子菜单's限制一次只能打开一个jquery子菜单

sidemenu submenu's limit to 1 open submenu at the time with jquery

本文关键字：菜单 jquery 一个 一次      更新时间：2023-09-26

我有一个带有几个子菜单的边栏。我希望只有一个子菜单是活动的时间。因此，如果一个子菜单是活动的，而你选择了另一个子菜单，那么第一个子菜单需要关闭。

这是目前为止我的jquery:

$('.sb-toggle-submenu').off('click').on('click', function () {
    $submenu = $(this).parent().children('.sb-submenu');
    $(this).add($submenu).toggleClass('sb-submenu-active');
    if ($submenu.hasClass('sb-submenu-active')) {
        $submenu.slideDown(200);
    } else {
        $submenu.slideUp(200);
    }
});

还有一个JSFiddle

我想有人能帮我解决这个问题。我是新的jquery和javascript，但试图学习。

http://jsfiddle.net/r3fSC/8/

给你

$('.sb-toggle-submenu').off('click').on('click', function () {
    console.log($('.sb-submenu-active'));
    if ($(this).is('.sb-submenu-active')) {
        $(this).removeClass('sb-submenu-active').parent().children('.sb-submenu').slideUp(200);
    } else {
        $('.sb-submenu-active').removeClass('sb-submenu-active').parent().children('.sb-submenu').slideUp(200);
        $(this).addClass('sb-submenu-active').parent().children('.sb-submenu').slideDown(200);
    }
});

小提琴:http://jsfiddle.net/s3ag4/

$('.sb-toggle-submenu').off('click').on('click', function () {
    var $button = $(this);
    var $submenu = $button.next( '.sb-submenu' );
    $button.toggleClass('sb-submenu-active');
    // Detect and close other menus
    $( '.sb-submenu-active' )
        .not( $button )
        .removeClass('sb-submenu-active')
        .next( '.sb-submenu' )
        .slideUp(200);
    if ( $button.hasClass('sb-submenu-active') ) {
        $submenu.slideDown(200);
    } else {
        $submenu.slideUp(200);
    }
});
相关文章：