Открыть и закрыть меню 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>

Что здесь не так с этим кодом, не JQuery правильно? : O

источник

2014-11-02 user3910313

http://stackoverflow.com/questions/17618910/ toggle-an-animate-with-jquery –

Ваш код в основном правильно, но создать переменную, например, var open = false; затем сделать проверку, когда пользователь нажимает на кнопку сделать что-то вроде этого if(open == false){ execute opening }) тогда else { execute closing } потому что JQuery не знает, является ли он открытым или нет, так что вы получили делать проверки на нем.

источник

2014-11-02 18:02:14 George

Спасибо, я знал об этом, но я думал, что есть более простой способ сделать это. – user3910313

Существует более простой способ, но я не думаю, что это так же читаемо, как функция toggle(). – George

Хорошо, я сделал это, он работает отлично, но, пока анимация закрывает его, он становится невидимым, вот код $ ('. Leftbox'). Animate ({left: "-15%"}); \t \t $ ('. Topbox'). Animate ({left: "0", width: "100%"}); \t \t open = false; $ ('. Leftbox'). Hide(); – 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

Я получаю ту же ошибку, что и другой ответ, в то время как он закрывает левый класс, исчезает. – user3910313

Открыть и закрыть меню jQuery

ответ

Смежные вопросы