Jquery，Div在視圖/鏈接懸停，固定菜單「彈出」

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