我想在单击另一个 anchor 后将导航返回到原始位置。我在下面写了 js
第一个动画正常工作但是当我单击第二个 anchor 将导航返回到原始位置时不起作用..
$(document).ready(function(){
$(".menu-button").click(function(){
$(".nav-bar").animate({left: '50px'});
});
$(".close-nav").click(function(){
$(".nav-bar").animate({left:'-50px;'});
});
});
.menu-button {
display: block;
width: 50px;
height: 50px;
background: red;
float: left;
}
.nav-bar {
position: relative;
background: rgba(0,0,0,0.5);
left: -600px;
}
.nav-bar ul {
list-style-type: none;
}
.nav-bar ul li {
float: left;
margin-left: 20px;
}
.nav-bar ul li a {
}
a.close-nav {
position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="menu-button open-nav"></a>
<nav class="nav-bar">
<ul>
<li><a href="">About Us</a></li>
<li><a href="">Our Portfolio</a></li>
<li><a href="">Client Testimonial</a></li>
<li><a href="">Contact</a></li>
<li><a href="" class="close-nav"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li>
</ul>
</nav>
最佳答案
您必须在事件对象上使用 preventDefault()
才能取消链接点击。否则,单击关闭箭头将再次导航到同一页面。
此外,您必须将动画返回到 -600px
(您的 css 的初始位置),而不仅仅是 -50px
。
$(document).ready(function(){
$(".menu-button").click(function(ev){
ev.preventDefault();
$(".nav-bar").animate({left: '50px'});
});
$(".close-nav").click(function(ev){
ev.preventDefault();
$(".nav-bar").animate({left:'-600px'});
});
});
.menu-button {
display: block;
width: 50px;
height: 50px;
background: red;
float: left;
}
.nav-bar {
position: relative;
background: rgba(0,0,0,0.5);
left: -600px;
}
.nav-bar ul {
list-style-type: none;
}
.nav-bar ul li {
float: left;
margin-left: 20px;
}
.nav-bar ul li a {
}
a.close-nav {
position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="menu-button open-nav"></a>
<nav class="nav-bar">
<ul>
<li><a href="">About Us</a></li>
<li><a href="">Our Portfolio</a></li>
<li><a href="">Client Testimonial</a></li>
<li><a href="">Contact</a></li>
<li><a href="" class="close-nav"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li>
</ul>
</nav>
关于javascript - 当单击另一个 anchor 时,jQuery 动画返回到原始位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47110649/