Question

我有一个带有一些子菜单的侧边栏。我希望当时只有一个子菜单处于活动状态。因此，如果子菜单处于活动状态，并且您选择了另一个子菜单，则第一个子菜单需要关闭。

到目前为止，这是我的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，但试图学习。

Answer 1

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);
    }
});

Answer 2

小提琴：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);
    }
});

使用jquery时，侧菜单子菜单限制为1个打开的子菜单

2 个答案: