[英]How to Close toggle menu when clicking navigation item anchor link
Please see my FIDDLE 请看我的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页的网站,带有“响应式”导航菜单(带有指向页面上元素的锚链接),当使用此javascript的浏览器视口小于特定宽度(在我的情况下为767px)时,该菜单菜单图标前面:
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? 我怎样才能做到这一点?
Just add this in $(document).ready function 只需将其添加到$(document).ready函数中
$('#menu li').on('click', function(){
$("#menu").hide();
$("#menu-icon").removeClass("active");
});
$('#menu li a').on("click", function(){
$('#menu').slideUp();
});
just slideUp()
if #menu li a
is clicked 如果单击了
slideUp()
#menu li a
则只需slideUp()
updated jsFiddle: http://jsfiddle.net/ayhpp8ax/1/ 更新的jsFiddle: http : //jsfiddle.net/ayhpp8ax/1/
(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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.