Moveup List with Definition列表項目

Question

最近Chris在他的Css-Tricks博客上發佈了posted an awesome jQuery code，它允許列表通過鼠標移動來上下滾動。不過，他將它用於無序列表項。

我喜歡使用這個對我目前的客戶項目，但我無法弄清楚如何在<dt>項目

HTML中使用這個是這樣的：

<dl> 

      <dt><a href="#">Example.net</a></dt> 
      <dd> 
       1 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. 
      </dd> 

      <dt><a href="#">Example2.net</a></dt> 
      <dd> 
       2 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. 
      </dd> 

      <dt><a href="#">Example3.net</a></dt> 
      <dd> 
       3 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. 
      </dd> 

      <dt><a href="#">Example4.net</a></dt> 
      <dd> 
       4 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. 
      </dd> 
</dl> 

<dd>不低於<dt>項目，它在另一個由jQuery放置的div中，所以項目的<dt>只是排列成鏈接。

而且我使用jQuery插件TinyScroll的滾動條，那臺overflow: autoflow;或什麼的。所以這可能是它不適合我的原因。

但這裏是從博客文章克里斯代碼：

$("#menu").css("overflow", "hidden").wrapInner("<div id='mover' />"); 

var $el, 
    speed = 13.5, // needs to be manually tinkered with 
    items = $("#menu a"); 

items 
.each(function(i) { 
     $(this).attr("data-pos", i); 
}) 
.hover(function() { 

     $el = $(this); 
     $el.addClass("hover"); 

     $("#mover").css("top", -($el.data("pos") * speed - 40)); 
     // 40 is the top padding for the fadeout 

}, function() { 
     $(this).removeClass("hover"); 
}); 

我將不得不改變，以得到它的工作適合我？

Answer 1

http://jsfiddle.net/9uySK/檢查此實現。

你可能錯過了幾件事情 - 在#mover元素上的絕對位置是一回事......但哦 - 檢查jsFiddle解決方案，如果您有任何問題，請讓我知道並將它們放入評論中。

希望它能幫助，

湯姆

PS。檢查增加的CSS以及

Answer 2

隱藏<dd> S和使用其他容器來保存其內容

<div class="fancy-dl"> 
    <dl> 
    ... 
    </dl> 
    <div class="displayer"></div> 
</div> 

和

$(function() { 
    $('dd').hide(); 
    $('dt').hover(function() { 
    var ddHtml = $(this).next('dd').html(); 
    $(this).parent().siblings('.displayer').hide().html(ddHtml).show(); 
    }); 
}); 

你可能想淡出/動畫顯示器，而不是hide和show。

Answer 3

從博客文章http://css-tricks.com/the-moveup-menu/

變化：

items = $("#menu a"); 

到：

items = $("#menu dt"); 

，它應該與