單擊導航項錨點鏈接時如何關閉切換菜單

Question

請看我的FIDDLE

我有一個1頁的網站，帶有“響應式”導航菜單（帶有指向頁面上元素的錨鏈接），當使用此javascript的瀏覽器視口小於特定寬度（在我的情況下為767px）時，該菜單菜單圖標前面：

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視口以下時，此菜單才適用）。

我怎樣才能做到這一點？

Answer 1

只需將其添加到$（document）.ready函數中

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

Answer 2

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

如果單擊了slideUp() #menu li a則只需slideUp()

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

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