Javascript 单击导航项锚链接时如何关闭切换菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26383681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Close toggle menu when clicking navigation item anchor link
提问by user3364730
Please see my FIDDLE
请看我的小提琴
I've got a 1 page website with a "responsive" navigation menu (with anchor links to elements on the page) that prepends to a menu icon when the browser viewport is smaller than a specific width (in my case 767px) using this javascript:
我有一个带有“响应式”导航菜单（带有指向页面上元素的锚链接）的 1 页网站，当浏览器视口小于特定宽度（在我的情况下为 767px）时，使用此 javascript 附加到菜单图标：
jQuery(document).ready(function($){
$('#menu_wrapper').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
$("#menu").slideToggle();
$(this).toggleClass("active");
});
});
As you can see in the fiddle I'm also using javascript to make the navigation sticky when scrolling down past navigation element regardless of the viewport size.
正如您在小提琴中看到的那样，无论视口大小如何，我还在向下滚动导航元素时使用 javascript 使导航变得粘滞。
Now the problem I have is that when I am below the viewport of 767px, I click on the toggle 'MENU' button to open / show the navigation and when I click an option in the menu, the page scrolls to the correct part of the page BUT the menu stays open.
现在我遇到的问题是，当我低于 767px 的视口时，我点击切换“菜单”按钮打开/显示导航，当我点击菜单中的一个选项时，页面滚动到正确的部分页面但菜单保持打开状态。
What I want is the menu to close (slide back up) when an option is clicked in the menu (obviously this must only apply when I am below below the viewport of 767px).
我想要的是在菜单中单击一个选项时关闭（向上滑动）菜单（显然这必须仅在我低于 767px 视口时才适用）。
How can I do this?
我怎样才能做到这一点？
回答by Alex Doe
Just add this in $(document).ready function
只需将其添加到 $(document).ready 函数中
$('#menu li').on('click', function(){
$("#menu").hide();
$("#menu-icon").removeClass("active");
});
回答by Aaroniker
$('#menu li a').on("click", function(){
$('#menu').slideUp();
});
just slideUp()if #menu li ais clicked
只是slideUp()，如果#menu li a被点击
updated jsFiddle: http://jsfiddle.net/ayhpp8ax/1/
更新 jsFiddle：http: //jsfiddle.net/ayhpp8ax/1/
回答by Simon
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($( window ).width() > 1500) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 900) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
});
})(jQuery);
