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/

Answer 2

你想要隐藏你最初不想看到的所有li（我是通过将它们全部添加到一个类中来实现的，'隐藏'）。然后，当您将鼠标悬停在菜单上时，它会将这些li向下滑动，而mouseleave会将它们向上滑动。

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 class="hide">Menu Content 6</li>
<li class="hide">Menu Content 7</li>
<li class="hide">Menu Content 8</li>
<li class="hide">Menu Content 9</li>
<li class="hide">Menu Content 10</li>
<li class="hide">Menu Content 12</li>
<li class="hide">Menu Content 13</li>
<li class="hide">Menu Content 14</li>
<li class="hide">Menu Content 15</li>
<li class="hide">Menu Content 16</li>
</ul>

CSS

.hide{
display:none;
}

JS

$("#slider").on("mouseover",function(){
$("li.hide").slideDown();
});

$("#slider").on("mouseleave",function(){
$("li.hide").stop(true,true).slideUp();
});

http://jsfiddle.net/Tpqg7/1/

Answer 3

你可以在没有javascript的情况下完成。这是css：

#slider li{
    display:none;
}
#slider li:first-child,
#slider li:first-child+li,
#slider li:first-child+li+li,
#slider li:first-child+li+li+li,
#slider li:first-child+li+li+li+li{
    display:block;
}
#slider:hover li{
    display:block;
}

Answer 4

试试这个......或选中 JSFiddle ... 我已在mousehover上应用了我的逻辑。仅在three <li>显示。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('li').bind('mouseenter', function () {
                if ($(this).next().css('display') == 'none') {
                    $(this).next().css('display', '');
                    $(this).prev().css('display', '');
                    $(this).prev().prev().css('display', 'none');
                    $(this).next().next().css('display', 'none');
                }
                else if ($(this).prev().css('display') == 'none') {
                    $(this).next().css('display', '');
                    $(this).prev().css('display', '');
                    $(this).next().next().css('display', 'none');
                    $(this).prev().prev().css('display', 'none');

                }
            });
        });

        function Apply() {
            var i = 0;
            $('li').each(function () {
                if (i > 2) {
                    $(this).css('display', 'none');
                }
                i = i + 1;
            });
        }
    </script>
</head>
<body onload="Apply()">
    <form id="form1" runat="server">
    <div >
        <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>
    </div>
    </form>
</body>
</html>

.....

滚动对菜单项的影响

4 个答案: