javascript - 单击导航项 anchor 链接时如何关闭切换菜单

Question

请看我的FIDDLE

我有一个带有“响应式”导航菜单(带有指向页面元素的 anchor 链接)的 1 页网站，当浏览器视口(viewport)小于特定宽度(在我的例子中为 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 中看到的那样，无论视口(viewport)大小如何，当向下滚动经过导航元素时，我还使用 javascript 使导航变得粘滞。

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

我想要的是在菜单中单击一个选项时关闭(向上滑动)菜单(显然这必须仅适用于我低于 767px 视口(viewport)的情况)。

我该怎么做？

Answer 1

$('#menu li a').on("click", function(){
    $('#menu').slideUp();
});

如果 #menu li a 被点击，只需 slideUp()

更新了 jsFiddle:http://jsfiddle.net/ayhpp8ax/1/