Javascript 如何在单击导航项锚链接时关闭切换菜单

请看我的

我有一个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");
});
});

jQuery（文档）.ready（函数（$）{
$（'menu#u wrapper'）。前置（'menu'）；
$（“#菜单图标”）。在（“单击”，函数（）上）{
$（“#菜单”）.slideToggle（）；
$（此）.toggleClass（“活动”）；
});
});

正如您在fiddle中看到的那样，当向下滚动浏览导航元素时，无论视口大小如何，我也在使用javascript使导航保持粘性

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

我想要的是在菜单中单击某个选项时关闭菜单（向后滑动）（显然，这必须仅在我位于767px视口下方时适用）

我该怎么做

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

如果单击了菜单LIA，则只需单击

slideUp（）

更新的JSFIDLE:

只需将其添加到$（document）.ready函数中即可

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

（函数（$）{
$.fn.menumaker=函数（选项）{
var cssmenu=$（此），设置=$.extend({
标题：“菜单”，
格式：“下拉列表”，
粘性：假
}，选项）；
返回此值。每个（函数（）{
cssmenu.prepend（“”+settings.title+“”）；
$（this）.find（#菜单按钮”）.on（'click'，function（）{
$（this.toggleClass（'menu-opened'）；
var mainmenu=$（this.next（'ul'）；
if（mainmenu.hasClass（'open'））{
main menu.hide（）.removeClass（'open'）；
}
否则{
main menu.show（）.addClass（'open'）；
如果（settings.format==“下拉列表”）{
main menu.find（'ul'）.show（）；
}
}
});
cssmenu.find（'li-ul'）.parent（）.addClass（'has-sub'）；
multiTg=函数（）{
cssmenu.find（“.has sub”）.prepend（“”）；
cssmenu.find（“.submenu button”）。在（'click'，function（）上{
$（this.toggleClass（'submenu-opened'）；
if（$（this）.sibbins（'ul'）.hasClass（'open'））{
$（this）.sides（'ul'）.removeClass（'open'）.hide（）；
}
否则{
$（this）.this（'ul'）.addClass（'open'）.show（）；
}
});
};
如果（settings.format==='multitogle'）multiTg（）；
else cssmenu.addClass（'dropdown'）；
如果（settings.sticky==true）cssmenu.css（'position'，'fixed'）；
resizeFix=函数（）{
如果（$（窗口）.width（）>1500）{
cssmenu.find（'ul'）.show（）；
}
如果（$（window）.width（）太棒了！谢谢…但是当我在大于767px的视口中时，你会注意到我的“普通”菜单在单击我显然不想要的类别时会瞬间消失（你会在小提琴中看到这一点）。我想slideUp（）导致我的菜单瞬间消失（当在767px以上的视口中时）这很奇怪，因为hide（）并没有引起这个问题……无论如何，我还是感谢你，感谢你的帮助。真棒的朋友，我尝试了你的解决方案，效果很好：）尽管我不得不将$（'menu li'）更改为$（'menu li a'）…谢谢！
(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);