我是 jQuery 代码的新手。我试图自己开发一个“完整页面菜单”,但我很难在第二次单击时隐藏菜单。我试过 .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.
});
});
});
请注意,当我点击菜单时,此代码只会显示!
最佳答案
您没有为重置动画编写代码。这就是为什么它在这里只移动一次,如果类存在移动,我会重置动画。如果您有任何问题,请查看并告诉我。
$("#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);
});
关于javascript - jQuery,在点击时显示/隐藏绝对div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30460086/