Javascript 如何在单击另一个子菜单时关闭一个子菜单

我有这个代码来控制菜单。 我想在单击打开另一个子菜单时关闭一个子菜单

;(function($) {

    // DOM ready
    $(function() {

        // Add some classes and Append the mobile icon nav
        $('.nav').append($('<div class="nav-mobile"></div>'));
        $('.nav > ul').addClass('nav-list');
        $('.nav > ul > li').addClass('nav-item');
        $('.nav > ul > li > ul').addClass('nav-submenu');
        $('.nav > ul > li > ul > li').addClass('nav-submenu-item');

        // Add a <span> to every .nav-item that has a <ul> inside. And add an  sub menu icon indicator.
        $('.nav-item').has('ul').prepend('<span class="nav-click"><i></i></span>');

        // Click to reveal the mobile menu
        $('.nav-mobile').click(function() {
            $('.nav-list').toggle();
            $('.nav-submenu').hide(); // This will close the submenu when i click the top ribbon (.nav-mobile) to close the mobile menu
            if (!$('.nav-list').is(':visible')) { // the menu was closed because it's not visible anymore
                $('.nav-item .nav-click').each(function() { // loop through nav clicks
                    if ($(this).hasClass('icon-close')) { // This will toggle back the + icon on mobile menu close/open
                        $(this).toggleClass('icon-close');
                    }
                });
            }
        });

        // Dynamic binding to on 'click' and Toggle the nested nav
        $('.nav-list').on('click', '.nav-click', function() {
            $(this).siblings('.nav-submenu').toggle();

            // This will toggle the + and - when clicked
            $(this).removeClass('nav-click');
            $(this).toggleClass('icon-close');
            $(this).toggleClass('nav-click');
        });

        // This will toggle the menu/submenu/- when click outside of the menu
        $('.wrapper').click(function(event) {
            $('html').one('click', function() {
                $('.nav-list').hide();
                $('.nav-submenu').hide(); // This will close the submenu when you click the top ribbon (hamburger button) to close the mobile menu
                if (!$('.nav-list').is(':visible')) { // the menu was closed because it's not visible anymore
                    $('.nav-item .nav-click').each(function() { // loop through nav clicks
                        if ($(this).hasClass('icon-close')) { // This will toggle the +/- icon on mobile menu close/open
                            $(this).toggleClass('icon-close');
                        }
                    });
                }
            });
            event.stopPropagation();
        });

    });

})(jQuery);

；（函数（$）{
//DOM就绪
$（函数（）{
//添加一些类并附加移动图标导航
$（'.nav'）。追加（$（''）；
$（'.nav>ul'）.addClass（'nav-list'）；
$（'.nav>ul>li'）.addClass（'nav-item'）；
$（'.nav>ul>li>ul'）.addClass（'nav-submenu'）；
$（'.nav>ul>li>ul>li'）.addClass（'nav-submenu-item'）；
//为每个内部有
的.nav项添加一个图标，并添加一个子菜单图标指示器。
$（'.nav项'）。具有（'ul'）。前置（''）；
//单击以显示移动菜单
$（'.nav mobile'）。单击（函数（）{
$（'.nav list'）.toggle（）；
$（'.nav子菜单'）.hide（）；//当我单击顶部功能区（.nav mobile）关闭移动菜单时，将关闭子菜单
如果（！$（'.nav list'）.is（':visible'）{//菜单已关闭，因为它不再可见
$（'.nav item.nav click'）。每个（函数（）{//循环导航单击
如果（$（this）.hasClass（'icon-close'））{//这将切换回移动菜单上的+图标关闭/打开
$（this.toggleClass（'icon-close'）；
}
});
}
});
//动态绑定到“单击”并切换嵌套导航
$（'.nav list'）。在（'click'，'.nav click'，function（）上{
$（this）.sides（'.nav子菜单'）.toggle（）；
//这将在单击时切换+和-
$（this.removeClass（'nav-click'）；
$（this.toggleClass（'icon-close'）；
$（this.toggleClass（'nav-click'）；
});
//当在菜单外单击时，将切换菜单/子菜单/-
$（'.wrapper'）。单击（函数（事件）{
$（'html'）.one（'click'，function（）{
$（'.nav list'）.hide（）；
$（'.nav子菜单'）.hide（）；//当您单击顶部功能区（汉堡按钮）关闭移动菜单时，将关闭子菜单
如果（！$（'.nav list'）.is（':visible'）{//菜单已关闭，因为它不再可见
$（'.nav item.nav click'）。每个（函数（）{//循环导航单击
如果（$（this）.hasClass（'icon-close'））{//这将切换移动菜单上的+/-图标关闭/打开
$（this.toggleClass（'icon-close'）；
}
});
}
});
event.stopPropagation（）；
});
});
})（jQuery）；

---

那么，当单击另一个子菜单时，我如何才能关闭一个子菜单呢？

构建

nav click

方法这种方法应该可以做到：

// Dynamic binding to on 'click' and Toggle the nested nav
$('.nav-list').on('click', '.nav-click', function(){
    $('.nav-submenu').not($(this).siblings('.nav-submenu')).hide();
    $('.nav-item .nav-click').not(this).removeClass('icon-close'); 
    $(this).siblings('.nav-submenu').toggle();
    $(this).toggleClass('icon-close');  
});

首先，我们针对所有子AV元素（不包括当前单击的元素），强制关闭它，然后在当前元素上进行切换

只需提及：使用普通js可以更轻松地实现这一点，使用任何双向数据绑定框架都可以实现超快，jquery在这里没有帮助，但这是您的选择。

您能提供一把小提琴吗？好的，给您：现场演示：