열기 및 닫기 메뉴 jQuery

버튼을 한 번 클릭 한 다음 두 번째 시간을 닫으면 열리는 간단한 메뉴를 만들려고합니다. 이전에이 작업을 수행했지만 지금은 수행 방법을 기억할 수 없습니다. , JQuery와 올바른 열기 및 닫기 메뉴 jQuery

var main = function(){ 
 
\t $('#menuopen').click(function(){ 
 
\t \t $('.leftbox').show(); 
 
\t \t $('.leftbox').animate({left: "0"}); 
 
\t \t $('.topbox').animate({left: "15%", width: "85%"}); 
 
\t }, 
 
\t function(){ 
 
\t \t $('.leftbox').animate({left: "-15%"}); 
 
\t \t $('.leftbox').hide(); 
 
\t \t $('.topbox').animate({left: "0", width: "100%"}); 
 
\t } 
 
\t); 
 
} 
 

 
$(document).ready(main);

body { 
 
\t background-color: #CCCCCC; 
 
} 
 

 
h2{ 
 
\t text-align: center; 
 
\t font-family: 'Lato', sans-serif; 
 
} 
 

 
.topbox{ 
 
\t position: absolute; 
 
\t top: 0%; 
 
\t left: 0%; 
 
\t width: 100%; 
 
\t height: 10%; 
 
\t background-color: #006699; 
 
} 
 

 
.leftbox{ 
 
\t display: none; 
 
\t position: absolute; 
 
\t background-color: #FFFFFF; 
 
\t top: 0px; 
 
\t left: -15%; 
 
\t width: 15%; 
 
\t height: 100%; 
 
\t box-shadow: 10px 67px 5px #888888; 
 
} 
 

 
#commentbox{ 
 
\t position: absolute; 
 
\t top: 87%; 
 
\t left: 30%; 
 
\t width: 50%; 
 
\t resize: none; 
 
\t border-radius: 5px; 
 
\t outline: none; 
 
\t box-shadow: 10px 10px 10px #888888; 
 
} 
 

 
#submitbox{ 
 
\t position: absolute; 
 
\t background-color: #006699; 
 
\t left: 82%; 
 
\t top: 87%; 
 
\t height: 66px; 
 
\t width: 132px; 
 
\t border-radius: 5px; 
 
\t border: 0px; 
 
\t outline: none; 
 
\t box-shadow: 10px 10px 10px #888888; 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-weight:; 
 
} 
 

 
#menuopen{ 
 
\t position: absolute; 
 
\t top: 25%; 
 
\t left: 15px; 
 
\t height: 32px; 
 
\t width: 32px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="script.js"></script> 
 
<link rel="stylesheet" href="style.css"> \t 
 
\t </head> 
 
<body> 
 
\t <div class="topbox"> 
 
\t \t <h2> Name's Lobby </h2> 
 
\t \t <img id="menuopen" src="menu_icon.png"/> 
 
\t </div> 
 
\t <div class="leftbox"> 
 
\t </div> 
 
\t <div class="inputbox"> 
 
\t \t <textarea placeholder="Enter your comment!" id="commentbox" rows="4" cols="50"></textarea> 
 
\t \t <input id="submitbox" type="submit" value="Submit"> 
 
\t </div> 
 
\t </body> 
 
</html>

이 코드로 잘못 여기에 무엇되지 않은 : 여기에이 코드인가? : O

출처

2014-11-02 user3910313

http://stackoverflow.com/questions/17618910/ 전환-AN-애니메이션 -에 - JQuery와 –

코드는 대부분 정확하지만 else { execute closing } JQuery와는 열려 여부를 알 수 없기 때문에 또는 그래서 당신이있어하지 사용자가 버튼이 if(open == false){ execute opening }) 그런 짓을 클릭하면 다음 검사를 할 변수 예 var open = false;를 만들 그것에 대한 점검을 할 수 있습니다.

출처

2014-11-02 18:02:14 George

감사합니다, 나는이 방법을 알고 있지만, 나는이 일을 더 쉬운 방법이 생각했다. – user3910313

이 종류의 쉬운 방법이다 그러나 나는 그것이 토글() 함수의로 읽을 생각하지 않습니다. – George

괜찮 았어, 거의 완벽하게 작동하지만 애니메이션이 닫히는 동안 코드 $ ('leftbox')가 보이지 않게된다. animate ({left : "-15 %"}); \t \t $ ('. topbox'). animate ({왼쪽 : "0", 너비 : "100 %"}); \t \t open = false; $ ('. leftbox'). 숨기기(); – user3910313

@George 그것에 나를 이길하지만 각 클릭 후 전환 누가 받 opened 상태 변수를 추가 할 수 있습니다

var main = function(){ 
 
    var opened = false; 
 
\t $('#menuopen').click(function(){ 
 
     if (opened) { 
 
\t \t $('.leftbox').animate({left: "-15%"}); 
 
\t \t $('.leftbox').hide(); 
 
\t \t $('.topbox').animate({left: "0", width: "100%"}); 
 
     } else { 
 
\t \t $('.leftbox').show(); 
 
\t \t $('.leftbox').animate({left: "0"}); 
 
\t \t $('.topbox').animate({left: "15%", width: "85%"}); 
 
     } 
 
     opened = !opened; 
 
\t }); 
 
} 
 

 
$(document).ready(main);

body { 
 
\t background-color: #CCCCCC; 
 
} 
 

 
h2{ 
 
\t text-align: center; 
 
\t font-family: 'Lato', sans-serif; 
 
} 
 

 
.topbox{ 
 
\t position: absolute; 
 
\t top: 0%; 
 
\t left: 0%; 
 
\t width: 100%; 
 
\t height: 10%; 
 
\t background-color: #006699; 
 
} 
 

 
.leftbox{ 
 
\t display: none; 
 
\t position: absolute; 
 
\t background-color: #FFFFFF; 
 
\t top: 0px; 
 
\t left: -15%; 
 
\t width: 15%; 
 
\t height: 100%; 
 
\t box-shadow: 10px 67px 5px #888888; 
 
} 
 

 
#commentbox{ 
 
\t position: absolute; 
 
\t top: 87%; 
 
\t left: 30%; 
 
\t width: 50%; 
 
\t resize: none; 
 
\t border-radius: 5px; 
 
\t outline: none; 
 
\t box-shadow: 10px 10px 10px #888888; 
 
} 
 

 
#submitbox{ 
 
\t position: absolute; 
 
\t background-color: #006699; 
 
\t left: 82%; 
 
\t top: 87%; 
 
\t height: 66px; 
 
\t width: 132px; 
 
\t border-radius: 5px; 
 
\t border: 0px; 
 
\t outline: none; 
 
\t box-shadow: 10px 10px 10px #888888; 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-weight:; 
 
} 
 

 
#menuopen{ 
 
\t position: absolute; 
 
\t top: 25%; 
 
\t left: 15px; 
 
\t height: 32px; 
 
\t width: 32px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="script.js"></script> 
 
<link rel="stylesheet" href="style.css"> \t 
 
\t </head> 
 
<body> 
 
\t <div class="topbox"> 
 
\t \t <h2> Name's Lobby </h2> 
 
\t \t <img id="menuopen" src="menu_icon.png"/> 
 
\t </div> 
 
\t <div class="leftbox"> 
 
\t </div> 
 
\t <div class="inputbox"> 
 
\t \t <textarea placeholder="Enter your comment!" id="commentbox" rows="4" cols="50"></textarea> 
 
\t \t <input id="submitbox" type="submit" value="Submit"> 
 
\t </div> 
 
\t </body> 
 
</html>

출처

2014-11-02 18:08:06

leftbox 클래스를 닫으면서 다른 답변과 같은 버그가 나타납니다. – user3910313

열기 및 닫기 메뉴 jQuery

답변

관련 문제