单击导航项定位链接时如何关闭切换菜单
How to Close toggle menu when clicking navigation item anchor link
请查看我的FIDDLE
我有一个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");
});
});
正如您在fiddle中看到的,无论视口大小如何,当向下滚动经过导航元素时,我也在使用javascript使导航变得粘稠。
现在我遇到的问题是,当我在767px的视口下方时,我单击切换"菜单"按钮打开/显示导航,当我单击菜单中的一个选项时,页面滚动到页面的正确部分,但菜单保持打开。
我想要的是当点击菜单中的一个选项时关闭菜单(向后滑动)(显然,这只能在我位于767px视口下方时适用)。
我该怎么做?
$('#menu li a').on("click", function(){
$('#menu').slideUp();
});
如果点击了#menu li a
,则仅为slideUp()
更新的jsFiddle:http://jsfiddle.net/ayhpp8ax/1/
只需将其添加到$(document).ready函数中即可
$('#menu li').on('click', function(){
$("#menu").hide();
$("#menu-icon").removeClass("active");
});
(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);
相关文章:
- 通过单击关闭菜单和ESC关闭菜单
- HTML/CSS 如何关闭菜单,然后使用 class=“active”
- 覆盖单击时关闭菜单需要双击而不是单击
- 单击任意位置关闭菜单
- 菜单打开和关闭菜单按钮 - Jquery
- 关闭菜单,单击关闭菜单本身
- Javascript单击以打开和关闭菜单,不使用jquery
- 单击时关闭菜单
- 关闭菜单,单击带有事件侦听器和父节点的正文
- 如果我使用 JQuery $(window).click(function() 关闭菜单,菜单的墨水不起作用
- 单击后关闭菜单
- 如何使用切换功能单击打开和关闭,但在选择菜单时关闭菜单
- 打开和关闭菜单jQuery
- 用javascript而不是jquery打开和关闭菜单
- jQuery关闭菜单自动关闭
- 避免在单击子菜单项时关闭菜单
- Javascript没有关闭菜单
- 我如何关闭菜单上的点击,当用户点击离开
- 打开和关闭菜单图标
- 响应多级菜单-如何关闭菜单时,链接被点击