我将以下代码用于悬停时弹出的固定侧菜单。在线找到代码,并且易于集成。

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

07-24 09:38
查看更多