单击导航项目锚点链接时如何关闭切换菜单 [英] How to Close toggle menu when clicking navigation item anchor link

问题描述

请参阅我的 FIDDLE

I'当浏览器视口小于特定宽度（在我的情况下为767px）时，使用这个javascript获得了一个带有响应式导航菜单（带有页面上元素的锚链接）的1页网站： / p>

  jQuery（document）.ready（function（$）{
 $（'＃menu_wrapper'）。prepend（' < div id =menu-icon> Menu< / div>'）; 
 $（＃menu-icon）on（click，function（）{
 $ #menu）。slideToggle（）; 
 $（this）.toggleClass（active）; 
}）; 
}）; 
  

正如您可以在小提琴中看到的，我还使用javascript在向下滚动时使导航变得粘稠过去的导航元素，无论视口的大小。

现在我遇到的问题是，当我在767px的视口下时，我点击切换'MENU'按钮打开/显示导航，当我点击菜单中的选项时，页面会滚动到页面的正确部分，但菜单保持打开状态。

我想要的是菜单在菜单中单击某个选项时关闭（向后滑动）（显然，这仅适用于当我低于

我该怎么做？ 在$（document）.ready函数中加入这个函数

  $（'＃menu li'）。 （）{
 $（＃menu）。hide（）; 
 $（＃menu-icon）。removeClass（active）; 
}）; 
  

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:

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.

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.

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).

How can I do this?

解决方案

Just add this in $(document).ready function

$('#menu li').on('click', function(){
        $("#menu").hide();
        $("#menu-icon").removeClass("active");
    });

这篇关于单击导航项目锚点链接时如何关闭切换菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！