我将以下代码用于悬停时弹出的固定侧菜单。在线找到代码,并且易于集成。
CSS:
<div id="nav">
<ul class="nav">
<li class="home"><a class="home" href="#home">Home</a></li>
<li class="museum"><a class="museum" href="#museum">Museum</a></li>
<li class="collection"><a class="collection" href="#collection">Collection</a></li>
<li class="timeline"><a class="timeline" href="#timeline">Timeline</a></li>
<li class="contact"><a class="contact" href="#contact">Contact</a></li>
</ul>
<div class="clear"></div>
</div>
jQuery的:
// link hover
$(function() {
$('.nav a').stop().animate({'marginLeft':'-140px'},200);
$('.nav > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-45px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-140px'},200);
}
);
});
我使用PlusAnchor脚本将页面滚动到正确的div:
// Page Scroll
$('body').plusAnchor({
easing: 'easeInOutExpo',
speed: 1000,
offsetTop: -60
});
现在,我需要修改代码,但是我不知道Jquery是什么新手。我需要让菜单项在用户单击后保持“弹出”状态,或者在用户滚动并且有问题的div进入视图时“弹出”。
我该如何实现?有可以采用的脚本吗?
JSFIDDLE:
http://jsfiddle.net/AG3tg/
最佳答案
本质上,您需要记录单击元素的时间,并进行相应的处理。如下更新您的jQuery代码:
$('document').ready(function() {
// link hover
$('.nav a').stop().animate({'marginLeft':'-140px'},200);
$('.nav > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-45px'},200);
},
function () {
if(!$(this).data('shown'))
{
$('a',$(this)).stop().animate({'marginLeft':'-140px'},200);
}
}
).click(function() {
$('.nav > li').data('shown', false);
$(this).data('shown', true);
$('.nav > li a').not(':eq('+$(this).index()+')').stop().animate({'marginLeft':'-140px'},200);
});
// plus anchor
$('document').plusAnchor({
easing: 'easeInOutExpo',
speed: 1000,
offsetTop: -60
});
})
这是一个updated jsFiddle