JQuery와 토글 버튼

Question

나는 = 그래서 내가 참아주세요, JQuery와 새로운 해요)

나는 메뉴를 "아래로 슬라이드"해야 "메뉴"버튼이 있습니다.

내 문제는 처음부터 메뉴가 보이고 처음에는 숨겨지기를 원한다면 메뉴가 "아래로 내려 가서"다음에 다시 "위로 움직여야"하는 것입니다. "Menu"버튼을 다시 누르십시오.

내 HTML :

이

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

내 JS 코드 : 당신은 그냥 일부 CSS를 추가 할 수 있습니다

<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

이처럼 처음에 그것을 숨길 수 :

​#effect { display: none; }​ 

또는 인라인, 같은 이 :

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

Answer 2

CSS의 #slide 요소에 display:none; 또는 visibility:hidden; 만 사용하면됩니다. 또는 $('#slide').hide();을 자바 스크립트의 시작 부분에 넣으십시오.

또한 위로/아래로 슬라이드하려는 경우 jQuery에는 기본 함수 slideUp(), slideDown() 및 slideToggle()이 있습니다. jQuery documentation을 참조하십시오.