感谢您查看我的问题并感谢您的帮助。
我有一个响应式网站,我正在创建一个移动导航(从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');
}
});
});
非常感谢,我真诚地感谢您的帮助。