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

问题描述

请看我的FIDDLE

我有一个带有响应式"导航菜单(带有指向页面元素的锚链接)的 1 页网站，当浏览器视口小于特定宽度(在我的情况下为 767 像素)时，该菜单位于菜单图标之前使用这个 javascript:

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");
});
});

正如您在小提琴中所看到的，无论视口大小如何，我还在向下滚动导航元素时使用 javascript 使导航变得粘滞.

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.

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

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

我该怎么做?

推荐答案

只需在 $(document).ready 函数中添加这个

Just add this in $(document).ready function

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

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