jquery - 菜单项的滚动效果

Question

我的 HTML 代码有一个很长的菜单。我只想向用户显示前五个菜单项。其余元素将显示在(鼠标)悬停效果上。

<ul id="slider">
   <li>Menu Content 1</li>
   <li>Menu Content 2</li>
   <li>Menu Content 3</li>
   <li>Menu Content 4</li>
   <li>Menu Content 5</li>
   <li>Menu Content 6</li>
   <li>Menu Content 7</li>
   <li>Menu Content 8</li>
   <li>Menu Content 9</li>
   <li>Menu Content 10</li>
   <li>Menu Content 12</li>
   <li>Menu Content 13</li>
   <li>Menu Content 14</li>
   <li>Menu Content 15</li>
   <li>Menu Content 16</li>
</ul>

我想要这样的东西:-

http://css-tricks.com/examples/LongDropdowns/

“有点高的菜单”

我尝试了几种解决方案，但它们都不适合我。

Answer 1

var n = 5;
$('li').slice(n).hide();

$( "li" ).mouseenter(function() {
    $('li').show();
}).mouseleave(function() {
    $('li').slice(n).hide();
});

JSfiddle:http://jsfiddle.net/4J4e4/