Javascript 单页响应式下拉菜单-隐藏“上的下拉菜单”;a「;点击

Javascript 单页响应式下拉菜单-隐藏“上的下拉菜单”;a「;点击,javascript,jquery,css,drop-down-menu,responsive,Javascript,Jquery,Css,Drop Down Menu,Responsive,使用响应式下拉菜单构建单页布局。我遇到的问题是,当用户单击“a”跳转链接时,我是否可以在.js文件中添加一个调用来折叠打开的菜单 (函数($){ $.fn.menumaker=函数(选项){ var cssmenu=$(此), 设置=$.extend({ 格式:“下拉列表”, 粘性:假 },选项); 返回此值。每个(函数(){ $(this).find(“.button mobile”).on('click',function(){ $(this.toggleClass('menu-opene

使用响应式下拉菜单构建单页布局。我遇到的问题是,当用户单击“a”跳转链接时,我是否可以在.js文件中添加一个调用来折叠打开的菜单

(函数($){
$.fn.menumaker=函数(选项){
var cssmenu=$(此),
设置=$.extend({
格式:“下拉列表”,
粘性:假
},选项);
返回此值。每个(函数(){
$(this).find(“.button mobile”).on('click',function(){
$(this.toggleClass('menu-opened');
var mainmenu=$(this.next('ul');
if(mainmenu.hasClass('open')){
main menu.slideToggle().removeClass('open');
}否则{
main menu.slideToggle().addClass('open');
如果(settings.format==“下拉列表”){
main menu.find('ul').show();
}
}
});
cssmenu.find('li-ul').parent().addClass('has-sub');
multiTg=函数(){
cssmenu.find(“.has sub”).prepend(“”);
cssmenu.find(“.submenu button”)。在('click',function()上{
$(this.toggleClass('submenu-opened');
if($(this).sibbins('ul').hasClass('open')){
$(this).sides('ul').removeClass('open').slideToggle();
}否则{
$(this).sides('ul').addClass('open').slideToggle();
}
});
};
如果(settings.format==='multitogle')multiTg();
else cssmenu.addClass('dropdown');
如果(settings.sticky==true)cssmenu.css('position','fixed');
resizeFix=函数(){
var-mediasize=960;
如果($(窗口).width()>mediasize){
cssmenu.find('ul').show();
}
如果($(窗口).width()ul:after{
内容:“.”;
显示:块;
明确:两者皆有;
可见性:隐藏;
线高:0;
身高:0;
}
#cssmenu#头部移动式{
显示:无;
}
#cssmenu>ul>li{
浮动:左;
}
#cssmenu>ul>li{
填充:10px0;
}
#cssmenu>ul>li:最后一个孩子{
边框:1px实心#fff;
边界半径:3px;
}
#cssmenu>ul>li>a{
填充:0 25px 0 25px;
字体大小:14px;
字体大小:400;
字母间距:1px;
文字装饰:无;
颜色:#FFF;
}
#cssmenu>ul>li:悬停>a,
#cssmenu ul li.主动a{
颜色:rgba(255、255、255、.7);
}
钮扣{
过渡:所有.3s都很轻松;
-moz过渡:所有.3秒都很轻松;
-o型过渡:所有。3秒容易进入;
-webkit过渡:所有.3s易用;
}
李。按钮菲尔:悬停{
背景色:rgba(226226226226.2);
过渡:全部。3放松;
-moz转换:所有.3都可以轻松完成;
-o-过渡:所有。3秒放松;
-webkit过渡:所有.3s都很轻松;
}
@媒体屏幕和屏幕(最大宽度:960像素){
导航{
宽度:100%;
边际上限:0;
}
#cssmenu{
宽度:100%;
利润上限:-10px;
}
#cssmenu ul{
宽度:100%;
显示:无;
}
#cssmenu ul li{
宽度:100%;
边框顶部:1px实心rgba(251252520.5);
背景色:#A31610;
}
#cssmenu>ul>li:最后一个孩子{
边框顶部:1px实心rgba(251252520.5);
左边框:0;
右边界:0;
边界底部:0;
边界半径:0;
}
#cssmenu ul li:悬停{
背景:#C22D32;
}
#cssmenu>ul>li{
填充:25px;
}
#cssmenu#头部移动式{
显示:块;
字体大小:16px;
字体大小:正常;
}
.按钮手机{
宽度:55px;
高度:46px;
位置:绝对位置;
右:40px;
顶部:-65px;
光标:指针;
z指数:12399994;
}
.按钮移动:之后{
位置:绝对位置;
顶部:22px;
右:20px;
显示:块;
高度:8px;
宽度:28px;
边框顶部:2个实心#FFF;
边框底部:2倍实心#FFF;
内容:'';
}
.按钮移动:之前{
-webkit过渡:所有.3s轻松;
-ms过渡:全部。3秒轻松;
过渡:全部。3秒轻松;
位置:绝对位置;
顶部:16px;
右:20px;
显示:块;
高度:2倍;
宽度:28px;
背景:#FFF;
内容:'';
}
.按钮移动。菜单打开:之后{
-webkit过渡:所有.3s轻松;
-ms过渡:全部。3秒轻松;
过渡:全部。3秒轻松;
顶部:23px;
边界:0;
高度:2倍;
宽度:27px;
背景:#fff;
-webkit变换:旋转(45度);
-moz变换:旋转(45度);
-ms变换:旋转(45度);
-o变换:旋转(45度);
变换:旋转(45度);
}
.按钮移动。菜单打开:之前{
顶部:23px;
背景:#fff;
宽度:27px;
-webkit变换:旋转(-45度);
-moz变换:旋转(-45度);
-ms变换:旋转(-45度);
-o变换:旋转(-45度);
变换:旋转(-45度);
}
.container.logo-nav,
.container.logo nav>.16.columns{
宽度:100%;
保证金:0;
}
}


在.menumaker()调用后,在“a”标记上添加一个侦听器,并启动一个函数关闭所有菜单

$("#cssmenu ul li a").click(function(){
    //fire another click to the menu button to toggle it closed.
});

能够使用“$”(“.cssmenu ul:has(li)a”)。在('click',函数(e){$(“.cssmenu ul”)。hide();$(this)。next(“ul”)。show();$(this)。next(.button mobile”)。removeClass('menu-opened');})`但是有一个问题,我无法使用js的最后一行删除汉堡包打开的类。明白了…我的js很糟糕,因为我的订单出了问题…这工作了
(函数($){$(文档).ready(函数(){$(“#cssmenu”).menumaker({格式:“多日志”});$(“#cssmenu ul has(li)a”).on('click',函数(e){$(“.cssmenu ul”).hide();$(“.button mobile”).removeClass('menu-opened');$(this.next(“ul”).show();})
感谢您的帮助。