jQUery移动导航校正

谢谢你看我的问题，谢谢你的帮助

我有一个响应迅速的网站，我正在创建一个760px的移动导航。它工作得很好，看起来也不错，但我的子菜单有问题

现在，我对jQuery不是很在行，因此您可能会发现我的工作有点凌乱，我提前表示歉意，并感谢您为使它看起来更干净、更少而提供的任何帮助

我需要的是： 1.我希望子菜单独立显示。我的意思是： 谷歌Chrome上的我：如果我点击有子菜单的产品，同样有子菜单的客户端也会扩展，反之亦然。我希望他们彼此独立。 Moxilla FireFox上的ii：单击具有子菜单的产品也会扩展客户端，但反之亦然。同样，我希望它们和其他子菜单必须相互独立

就像jqueryaccordion一样，当单击另一个带有子菜单的菜单时，是否可以让带有子菜单的活动菜单收缩？我也很想要这个。我的意思是，如果有子菜单的产品当前处于活动状态，当单击还有子菜单的客户端时，产品应该随着客户端的扩展而收缩，等等

我为那些可能对子菜单有不同需求的人构建这个，因此会创建更多或更少的子菜单。创建之后，我希望子菜单能够拾取并假设预定义的函数，而无需对jquery进行额外编码或添加更多子菜单。将要使用它的人没有jQuery知识。我希望他们只关注菜单的html和css定制，而jQuery已经为他们完成了

如果你能减少jquery的成本，我的意思是，压缩它或其他东西，那就太好了

注意：如果您正在全屏查看下面的JSFIDLE示例，请将浏览器窗口调整为760px以查看导航

这里有一个指向菜单的JSFIDLE链接：

---

非常感谢你，我真诚地感谢你的帮助

您正在使用非唯一ID，例如HTML、JavaScript和CSS中的mobile子菜单。尝试改用类，然后只在单击的父项下切换项目，例如：Hi Omar，10000 thank yous，it looks great and works great。但您是否注意到加载时会显示子导航？我希望它们仅在单击带有子菜单的父菜单时显示。如果现在单击菜单栏，您将看到，当菜单栏下拉并显示菜单时，父菜单也会下拉并显示子菜单。是否可以仅在单击时显示子菜单？再次感谢大家的帮助。我不是Omar，但是是的，更改行菜单=$'mobile-navigation>ul'；>使其仅切换条的直接子项。这里是最新的提琴：@ezanker谢谢。“很好用。”埃桑克尔：请再帮我一点忙。一切看起来都很好，但如果你点击任何子菜单，它不会转到他们的预期页面链接，而是会收回子导航。这里有一个例子来说明我的意思：。所有子菜单都链接到google.com，但单击后，它将作为父菜单并收回，而不是转到google.com。我真的需要帮助。任何人的贡献都是最受欢迎的。提前谢谢。

$(function() {
        var bar         = $('#bar');
            menu        = $('#mobile-navigation ul');
            menuHeight  = menu.height();

        $(bar).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 480 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });

$(function() {
        var submenu         = $('#mobile-submenu li');
            submenuHeight   = submenu.height();

        $(sub).on('click', function(e) {
            e.preventDefault();
            submenu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 480 && submenu.is(':hidden')) {
                submenu.removeAttr('style');
            }
        });
    });