Question

我使用以下代码显示悬停时弹出的固定侧边菜单。代码在网上找到，并且易于集成..

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/

Answer 1

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

Jquery，Div in view / link hover，固定菜单“弹出”

1 个答案: