javascript - 移动菜单的增强

Question

我有一个包含子菜单的菜单，然后每个子菜单项都包含其他一些子菜单。像这样的东西：

<div class="mobile-menu-wrapper">
<ul>
    <li>Item 1</li>
    <li class="menu-item-has-children">
        Item 2
        <ul class="sub-menu">
            <li>sub-item 1</li>
            <li>sub-item 2</li>
            <li class="menu-item-has-children">
                sub-item 3
                <ul class="sub-menu">
                    <li>sub-sub-item 1</li>
                    <li>sub-sub-item 2</li>
                    <li>sub-sub-item 3</li>
                    <li>sub-sub-item 4</li>
                </ul>
            </li>
            <li>sub-item 4</li>
            <li>sub-item 5</li>
        </ul>
    </li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>
</div>

这就是我的 JavaScript 的样子

var dropdownToggle = "<span class='btn-sm btn btn-default toggle-submenu'>+</span>";
var openSubmenu = "<span class='btn-sm btn btn-default open-submenu'>></span>";
$( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
$( '.menu-item-has-children > ul > .menu-item-has-children > a, .page_item_has_children > ul > .page_item_has_children > a' ).after( openSubmenu );

$("body").on('click', ".toggle-submenu", function() {
    $(".mobile-menu-wrapper").find(".sub-menu").slideUp().removeClass("active");
    $(this).parent().find(".sub-menu").slideToggle().addClass("active");
    $(".mobile-menu-wrapper").parent().find("ul li ul li ul").hide();
    //$(this).parent().parent().find(".sub-menu").not(this+" .sub-menu").slideToggle().removeClass("active");
});
$("body").on('click', ".open-submenu", function() {
    $(this).parent().parent().find(".sub-menu").animate({width: 'hide'}).addClass("active");
    $(this).parent().find(".sub-menu").animate({width: 'toggle'}).addClass("active");
});

我想要做的是当我点击打开一个子菜单时，它应该关闭所有其他子菜单并打开我点击的那个。这工作正常，但这里的问题是当我在打开同一个菜单项后单击它时它不会关闭。

标签： javascripthtmlcss