Jquery: Afficher / masquer le menu avec un seul bouton

J’essaie de créer un bouton qui appelle un menu. Une fois le menu appelé, cliquez sur le bouton pour fermer le menu.

Certaines classes doivent également être ajoutées au menu / bouton pour faciliter le style.

Comment puis-je faire ceci? (J’utilise jQuery 1.8.3.)

Ceci est mon code:

• Utilisation de jQuery pour ajuster la hauteur d’un élément parent à celle de l’enfant visible
• Comment masquer ma barre de navigation bootstrap 3 avec le clic sur le corps lorsque l’effondrement est visible?
• NicEdit éditeur html pour la gestion des ajouts / suppressions dynamics de zones de texte
• afficher des images en fonction de la largeur du navigateur
• Comment faire pour que les éléments li glissent vers le bas et vers le haut?

$(function() { "use ssortingct"; $(document).on('click', '.anchor', function() { $('.ui-tapmenu').removeClass("animated bounceInDown"); $('.ui-tapmenu').hide(); $('.overlay').hide(); var menuId = $(this).data('menu'); var menuName = '.' + menuId; $(".loading").delay(1000).show(0); $(menuName).addClass("animated bounceInDown"); $(menuName).show(); $(this).addClass('close jq-close'); }); $('body').on('click', '.close', function() { $(this).addClass('anchor'); $(this).removeClass('close'); $('.ui-tapmenu').removeClass("animated bounceInDown"); $('.ui-tapmenu').hide(); $('.overlay').hide(); $('.anchor.jq-close').removeClass('close'); }); }); 

JS Fiddle: http://jsfiddle.net/big_smile/d4ajx/

Problème: cela fonctionne, mais lorsque le menu est fermé, le code ouvert réapparaît, de sorte que le menu rest ouvert en permanence. Je ne sais pas pourquoi cela se produit, car lorsque le “code ouvert” est exécuté, il ajoute une classe au déclencheur. Le “code de fermeture” ne fonctionne que sur cette classe, le “code ouvert” ne doit donc plus être exécuté.

Voici une autre version:

 $(function() { "use ssortingct"; $(document).on('click', '.anchor', function() { $('.ui-tapmenu').toggleClass("animated bounceInDown"); $('.ui-tapmenu').toggle(); $('.overlay').toggle(); var menuId = $(this).data('menu'); var menuName = '.' + menuId; $(".loading").delay(1000).toggle(0); $(menuName).toggleClass("animated bounceInDown"); $(menuName).toggle(); $(this).toggleClass('close jq-close'); }); }); 

JsFiddle: http://jsfiddle.net/big_smile/G48bK/

Problème: Cette bascule utilise. Le menu est initialement masqué avec CSS. Toggle définit le menu sur “display: none” et ne le configure jamais sur “display: block”.

• L’en-tête de navigation Mon menu fixe ne rest pas dans la division dans laquelle il est contenu. S’agit-il d’un problème réactif?
• Comment afficher ou masquer un élément basé sur Geo ip
• Highcharts – Problème avec la fonction de refusion de la carte
• vérifier si l’image n’existe pas alors cacher un div
• Google Map ne affichant que partiellement