Question

最近克里斯posted an awesome jQuery code在他的Css-Tricks博客上允许列表通过鼠标移动向上和向下滚动。他将它用于无序列表项目。

我很乐意在我当前的客户端项目中使用它，但我无法弄清楚如何在<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>项只是排列为链接。

alt text

此外，我使用jQuery插件TinyScroll作为滚动条，设置overflow: autoflow;或其他。所以这可能是它不适合我的原因。

但是这里是来自博客文章的Chris Code：

$("#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>并使用其他容器来保存其内容

<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");

它应该与

一起使用

带定义列表项的移动列表

3 个答案: