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

【问题标题】：How to Close toggle menu when clicking navigation item anchor link单击导航项锚链接时如何关闭切换菜单
【发布时间】：2014-12-10 14:19:41
【问题描述】：

请看我的FIDDLE

我有一个带有“响应式”导航菜单（带有指向页面上元素的锚链接）的 1 页网站，当浏览器视口小于特定宽度（在我的情况下为 767 像素）时，该菜单会添加到菜单图标使用这个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 来使导航保持粘性。

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

我想要的是在菜单中单击一个选项时关闭（向后滑动）菜单（显然这必须仅在我低于 767px 的视口时才适用）。

我该怎么做？

【问题讨论】：

标签： javascript jquery html css menu

【解决方案1】：

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

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

更新的 jsFiddle：http://jsfiddle.net/ayhpp8ax/1/

【讨论】：

太棒了！谢谢......虽然当我在大于 767px 的视口中时，你会注意到我的“正常”菜单在单击我显然不想要的类别时会暂时消失（你会在你的小提琴中看到这个）
我认为 slideUp() 导致我的菜单暂时消失（当在 767px 以上的视口中时）这很奇怪，因为 hide() 不会导致这个问题......无论如何我仍然感谢你和感谢您的帮助

【解决方案2】：

只需将其添加到 $(document).ready 函数中

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

【讨论】：

很棒的哥们，我尝试了你的解决方案并且它有效:) 虽然我不得不将 $('#menu li') 更改为 $('#menu li a') ...谢谢！

【解决方案3】：

(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);

【讨论】：