Как закрыть меню переключения при нажатии навигации пункта якорной ссылки

Question

Пожалуйста, смотрите мой FIDDLE

У меня есть сайт на 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"); 
}); 
}); 

Как вы можете видеть на скрипке я также использую JavaScript, чтобы сделать навигацию липкой при прокрутке вниз, несмотря на размер видового экрана.

Теперь проблема заключается в том, что когда я нахожусь под окном просмотра 767px, я нажимаю кнопку переключения «MENU», чтобы открыть/показать навигацию, и когда я нажимаю кнопку в меню, страница прокручивается до верните часть страницы, но меню остается открытым.

Что мне нужно - это меню для закрытия (сползания назад) при нажатии кнопки в меню (очевидно, это должно применяться только тогда, когда я ниже под окном просмотра 767px).

Как я могу это сделать?

Answer 1

Просто добавьте это в $ (документ) .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 щелкают

обновленный 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);