0

我将以下代码用于悬停时弹出的固定侧边菜单。代码在网上找到，很容易集成..

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>

查询：

// 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/

4

1 回答 1

3

本质上，您需要记录单击元素的时间，并相应地进行处理。更新您的 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
    });
})

这是一个更新的 jsFiddle

于 2013-04-08T17:37:26.283 回答