Jquery 菜单项上的滚动效果_Jquery_Css

Jquery 菜单项上的滚动效果

jquery css

Jquery 菜单项上的滚动效果,jquery,css,Jquery,Css,我的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 Conte

我的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>


菜单内容1
菜单内容2
菜单内容3
菜单内容4
菜单内容5
菜单内容6
菜单内容7
菜单内容8
菜单内容9
菜单内容10
菜单内容12
菜单内容13
菜单内容14
菜单内容15
菜单内容16

我想要这样的东西：-

“有点高的菜单”

我尝试了几种解决方案，但它们对我不起作用。

您希望隐藏最初不希望可见的所有li（我通过将它们全部添加到类“hide”来实现）。然后，当你将鼠标移到菜单上时，它会将这些li向下滑动，mouseleave会将它们向上滑动

HTML

JSfiddle:

您可以在没有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;
}

试试这个。。。或者检查…我已经在

鼠标上方应用了我的逻辑。一次仅显示三个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>


$（文档）.ready（函数（）{
$（'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'）；
}
});
});
函数Apply（）{
var i=0；
$（'li'）。每个（函数（）{
如果（i>2）{
$（this.css（'display'，'none'）；
}
i=i+1；
});
}

菜单内容1
菜单内容2
菜单内容3
菜单内容4
菜单内容5
菜单内容6
菜单内容7
菜单内容8
菜单内容9
菜单内容10
菜单内容12
菜单内容13
菜单内容14
菜单内容15
菜单内容16


…您尝试了什么方法？举个例子对我们很有帮助。当您说滚动时，您的意思是希望元素保持相同的大小-因此只显示5个项目，但允许用户滚动？在这种情况下，请看CSSOverflow@LuckyBoy“滚动效果”是什么意思？这是一个相当含糊的请求。@LuckyBoy你可以查看示例的来源。。他们正在用这个来创建dropdwown@LuckyBoy，你能告诉我你觉得怎么样吗。。。？
$("#slider").on("mouseover",function(){
$("li.hide").slideDown();
});

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

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

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

#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;
}

<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>