Ouvert une navigation de liste déroulante, mais ne peut pas le fermer (jQuery)

Question

J'ai fait une navigation déroulante en utilisant Jquery et css. Lorsque vous cliquez sur un bouton spécifique, il s'ouvre, mais je n'arrive pas à le fermer lorsque vous cliquez à nouveau sur ce bouton. Voici le code que je utilise (je l'ai créé un bouton « Fermer » pour fermer mais que vous voulez qu'il se ferme lorsque vous cliquez sur le même bouton que vous avez fait pour l'ouverture)

Jquery:

 $("#shadow").css("height", $(document).height()).hide(); 

    $(".menubutton").click(function() { 
    $(".thetopmenu").css("padding","0px"); 
    $(".thetopmenu").css("display","block"); // Displayes the menu 
    $(this).addClass("active"); // Add "active" class to selected tab 
    $("#shadow").toggle(); 
    }); 

    $(".close").click(function() { 
    $(".thetopmenu").css("display","none"); 
    $(".menubutton").removeClass("active"); 
    $("#overlay").css("display","none"); // Removes "active" class to selected tab 
    $("#shadow").toggle(); 
    }); 

CSS:

 .menubutton { 
     margin: 0; padding: 6px 0 0 0; 
     background: url(images/menu.png) no-repeat left top; 
     width: 44px; height: 16px; 
     position: absolute; 
     right: 10px; 
     top: 20px; 
     text-align: center; 
     display: block; 
     text-transform: uppercase; 
     color: #c3c3c3; 
     text-shadow: 0px -1px 0px #4f4f4f; 
     font-family: MPSemibold, Arial; 
     font-size: 10px; 
     text-decoration: none; 
    } 

    .menubutton:link { 
     text-transform: uppercase; 
     color: #c3c3c3; 
     text-shadow: 0px -1px 0px #4f4f4f; 
     font-family: MPSemibold, Arial; 
     font-size: 10px; 
     text-decoration: none; 
    } 


    .menubutton:active, .menubutton.active, menubutton:hover { 
     background: url(images/menuh.png) no-repeat left top; 
     color: #fff; 
    }  

    .thetopmenu { 
     display: none; 
     position: absolute; 
     left: 0; 
     z-index: 999; 
     top: 61px; 
     width: 100%; 
    } 

HTML:

<a href="#" class="menubutton"><span>Menu</span></a> 
      <div class="thetopmenu"> 
       <ul id="content"> 
       <li><a href="ladies.php">Ladies' Collection</a></li> 
       <li><a href="gents.php">Gents' Collection</a></li> 
       <li><a href="store.php">Store Locator</a></li> 
       <li><a href="#" class="close">Close</a></li> 
       </ul> 
      </div> 

le #shadow s'efface tout le reste de l'écran et laisse sur Le menu est normal. Je pense que c'est assez simple mais je ne suis pas très bon en jQuery.

Merci

Answer 1

ne devrait pas vous faire quelque chose comme:

$(".menubutton").click(function() { 
    if($(this).css("display") == 'none') 
    { 
    $(".thetopmenu").css("padding","0px"); 
    $(".thetopmenu").css("display","block"); // Displayes the menu 
    $(this).addClass("active"); // Add "active" class to selected tab 
    $("#shadow").toggle(); 
    } 
    else 
    { 
    $(".thetopmenu").css("display","none"); 
    $(".menubutton").removeClass("active"); 
    $("#overlay").css("display","none"); // Removes "active" class to selected tab 
    $("#shadow").toggle(); 
    } 
    }); 

Peut-être que je suis malentendu, mais il n'y a aucun moyen semblant le bouton connaîtrait votre intention au deuxième clic.

Answer 2

Une astuce consiste à ajouter une classe lors de l'ouverture, puis vérifiez à nouveau cette classe pour savoir si vous souhaitez la fermer et supprimer la classe.

Puisque vous ajoutez et supprimez déjà une classe pour d'autres raisons, c'est peut-être la meilleure façon d'obtenir ce que vous voulez.

J'ai remixé votre code un peu, directement ici dans l'éditeur, il devrait fonctionner (plus ou moins), de toute façon vous donne l'idée:

$(".menubutton").click(function() { 
    if ($(this).is('.active')) { 
     $(".thetopmenu").css("display","none"); 
     $(this).removeClass("active"); 
    } else { 
     // Displayes the menu 
     $(".thetopmenu").css({ 
     padding : "0px", 
     display: "block" 
     }); 
     $(this).addClass("active"); // Add "active" class to selected tab 
    } 
    $("#shadow").toggle(); 
    }); 

Hope it helps, Simone