Comment Fermer bascule menu de navigation en cliquant sur l'élément d'ancrage lien

Veuillez consulter mon VIOLON

J'ai une 1 page de site web "responsive" menu de navigation avec les liens d'ancrage d'éléments sur la page) qui ajoute une icône de menu lorsque le navigateur de la fenêtre est plus petite que la largeur (dans mon cas 767px) à l'aide de ce javascript:

jQuery(document).ready(function($){
$('#menu_wrapper').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
    $("#menu").slideToggle();
    $(this).toggleClass("active");
});
});

Comme vous pouvez le voir dans le violon, je suis aussi à l'aide de javascript pour rendre la navigation collant quand le défilement vers le bas passé, élément de navigation, indépendamment de la taille de la fenêtre.

Maintenant le problème que j'ai c'est que quand je suis en dessous de la fenêtre d'affichage de 767px, je clique sur la bascule bouton "MENU" pour ouvrir /afficher la navigation et quand je clique sur une option dans le menu, la page défile pour la partie correcte de la page, MAIS le menu reste ouvert.

Ce que je veux, c'est du menu pour le fermer (glisser) lorsqu'une option est cliqué dans le menu (évidemment, cela doit s'appliquer uniquement quand je suis en dessous de en dessous de la fenêtre d'affichage de 767px).

Comment puis-je faire cela?

InformationsquelleAutor user3364730 | 2014-10-15
  1. 3

    Juste ajouter ceci dans le $(document).prêt de la fonction

    $('#menu li').on('click', function(){
        $("#menu").hide();
        $("#menu-icon").removeClass("active");
    });
    • Génial, mon pote, j'ai essayé ta solution et ça fonctionne 🙂 si je devais changer de $('#menu li') à $('#menu li a') ... Merci!
    • Heureux, il a travaillé, succès dans le développement 😉
    InformationsquelleAutor Alex Doe
  2. 2
    $('#menu li a').on("click", function(){
    $('#menu').slideUp();
});

    juste slideUp() si #menu li a est cliqué

    mis à jour jsFiddle: http://jsfiddle.net/ayhpp8ax/1/

    • Génial! merci ... mais quand je suis dans une fenêtre plus grande que 767px, vous remarquerez que mon "normal" menu momentanément disparaît lorsque vous cliquez sur une catégorie pour laquelle je ne veux évidemment pas (vous verrez cela dans votre violon)
    • Je pense que le slideUp() a été l'origine de mon menu momentanément disparaître (lorsque dans la fenêtre d'affichage au-dessus de 767px) qui est étrange, car hide() ne cause pas de problème ... de toute façon je remercie encore et vous remercie de votre aide
    InformationsquelleAutor Aaroniker
  3. -2
    (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);
    InformationsquelleAutor Simon