Question

感谢您查看我的问题并感谢您的帮助。

我有一个响应式网站，我正在创建一个移动导航（从760px）。它工作得很好，看起来很棒，但我的子菜单有问题。

现在，我对jQuery不是很了解，因此你可能会发现我的工作有点混乱，我提前道歉并感谢任何帮助，使它看起来更清洁，更少。

我需要什么：我想让子菜单独立显示。我的意思是：（i）在谷歌浏览器上：如果我点击“产品”（有子菜单），“客户端”（也有子菜单）也会扩展，反之亦然。我希望他们彼此独立。（ii）在Moxilla FireFox上：点击“产品”（有子菜单）也会扩展“客户”，但反之亦然。同样，我想要它们和其他子菜单我必须彼此独立。

就像jQuery手风琴一样，一旦点击了另一个菜单（带子菜单），是否可以让活动菜单（带子菜单）缩回？我也真的想要这个。我的意思是，如果“产品”（有子菜单）当前处于活动状态，当点击“客户”（也有子菜单）时，产品应该在客户扩展时收回等等......
< / LI>
我正在为可能对子菜单有不同需求的人构建这个，因此会创建更多或更少的子菜单。一旦创建，我希望子菜单能够拾取并采用预定义的函数，而无需进行额外的编码或在jquery上添加更多子菜单。将使用它的人没有jQuery知识。我希望他们只关注自定义菜单的html和css，而jQuery已经为他们完成了。
如果你可以让jquery减少bucky，我的意思是，压缩它或其他东西，这将是伟大的。

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

这是菜单的jsfiddle链接：http://jsfiddle.net/Delinx/8tstrfuq/

$(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');
            }
        });
    });

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

jQUery移动导航校正

0 个答案: