JQuery Bouton bascule

Question

Je suis nouveau à JQuery, alors s'il vous plaît garder avec moi =)

J'ai un bouton « Menu » qui devrait « glisser vers le bas » un menu. Mon problème est que le menu est visible dès le départ, je veux qu'il soit caché au début, puis en cliquant sur le bouton "Menu", le menu "glisser vers le bas" puis "glisser vers le haut" à nouveau après en appuyant à nouveau sur le bouton "Menu".

Mon HTML:

<div id="moduleMenuBtn" class="moduleMenuBtn">Menu</div> 
<div id="effect">Some Content</div> 

Mon code JS:

<script type="text/javascript"> 

    $(function() { 
     function runEffect(){ 
      var selectedEffect = $('#slide').val(); 
      var options = {}; 
      if(selectedEffect == 'scale'){ options = {percent: 0}; } 
      else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; } 
      $("#effect").toggle(selectedEffect,options,500); 
     }; 

     $("#moduleMenuBtn").click(function() { 
      runEffect(); 
      return false; 
     }); 
    }); 
</script> 

Answer 1

Vous pouvez simplement ajouter un peu de CSS pour le cacher d'abord, comme ceci:

​#effect { display: none; }​ 

ou en ligne, comme ceci:

<div id="effect" style="display: none;">Some Content</div> 

Answer 2

Utilisez simplement display:none; ou visibility:hidden; sur l'élément #slide dans css. Ou mettez $('#slide').hide(); au début de javascript.

De plus, si vous souhaitez faire glisser vers le haut/bas, jQuery a les fonctions natives slideUp(), slideDown() et slideToggle(). Voir jQuery documentation.