[英]jQuery, reveal/hide absolute div on click
我是新的jQuery代码..我试图开发一个“整页菜单”由我,但我有一些困难隐藏menù在第二次点击..我试过.toggle()但我读了那个已经退休..你能不能帮我? 非常感谢你,抱歉我的英语不好。
HTML
<div class="container">
<a id="bars" href="#">Apri/Chiudi Menù</a>
</div>
<nav id="nav" class="nav-default">
<ul>
<li>Home</li>
<li>Servizi</li>
<li>Portfolio</li>
<li>Contatti</li>
</ul>
</nav>
CSS
#bars {
position: fixed;
z-index: 2;
}
#nav {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#nav ul {
list-style: none;
}
.nav-default {
left: -100%;
top:0;
background: #ccc;
}
jQuery的
$(document).ready(function() {
$("#bars").click(
function (){
$(".nav-default").animate({
left: "0"
}, 1000, function() {
// Animation complete.
});
});
});
PS Whit这个代码当我点击menù只显示!
您没有为重置动画编写编码。 这就是为什么它只移动一次我重置动画如果类存在移动。 如果您有任何问题,请查看并告诉我。
$("#bars").click(function (){
var move;
if(!$(".nav-default").hasClass('moved')){
var move = 0;
$(".nav-default").addClass('moved');
}
else{
var move = "-100%";
$(".nav-default").removeClass('moved');
}
$(".nav-default").animate({
left: move
}, 1000);
});
我建议使用CSS过渡并添加一个类来表示菜单是活动的。
这是以下代码的jsfiddle: http : //jsfiddle.net/975va7qv/
HTML保持不变:
<div class="container">
<a id="bars" href="#">Apri/Chiudi Menù</a>
</div>
<nav id="nav" class="nav-default">
<ul>
<li>Home</li>
<li>Servizi</li>
<li>Portfolio</li>
<li>Contatti</li>
</ul>
</nav>
CSS - 在菜单打开时添加了新类。 添加了left
属性的转换,以使其平滑过渡。
#bars {
position: fixed;
z-index: 2;
}
#nav {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#nav ul {
list-style: none;
}
.nav-default {
left: -100%;
top:0;
background: #ccc;
transition: left .5s ease;
}
.nav-default.is-open {
left: 0
}
JQuery的
$(document).ready(function() {
var nav = $('.nav-default'),
bar = $('#bars');
bar.click(function (){
// Check to see if the nav is open
if (nav.hasClass('is-open')) {
// If it is, close it
nav.removeClass('is-open');
} else {
// Nav is closed - open it up
nav.addClass('is-open');
}
});
});
使用标志来设置/恢复动画。
var flag=0; //Initial value to 0
$(document).ready(function() {
$("#bars").click(
function (){
if(flag==0) //Check here
$(".nav-default").animate({
left: "0"
}, 1000, function() {
flag=1;
});
else
$(".nav-default").animate({
left: "-100%"
}, 1000, function() {
flag=0;
});
});
});
在这里小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.