Question

这个有点难以解释，所以我已经包含了我正在使用的所有代码。

当页面加载li元素时，直到我将鼠标悬停在它们上面，此时它们会消失，菜单的工作方式正如我所希望的那样。是什么让他们可见？我已经尝试将li宽度设置为0px，但这也不起作用。

另外，为什么UL的左侧有40px的边框？我还没有制作任何边框，为了让文字显示在最左边，我需要将li边距设置为-40px。

无论如何，这是代码......

<style type="text/css">
body {
background-color: #000;
margin:0;
text-align:center;
min-width:1080px;
max-width:1200px;
margin-left:auto;
margin-right:auto;
font:Arial, Helvetica, sans-serif; color:#FFF;
}
ul#navigation {
position: fixed;
z-index:9999;
background-color:#999;
margin:0;
width:0px;
}
ul#navigation li {
text-align:left;
list-style:none;
}

</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script>

$(function() {

            $("ul#navigation").hover(function(){
                    $('ul#navigation').stop().animate({'width':'150px'},200);
                },
                function () {
                    $('ul#navigation').stop().animate({'width':'0px'},200);
                }
            );
        });

</script>
</head>
<body>
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Pics</li>
<li>Stuff</li>
</ul>
</body>

谢谢：）

Answer 1

不确定我是否理解所有，但是很简单 $("ul#navigation").hide()和$("ul#navigation").show()可以有效，不是吗？

Answer 2

您的jquery函数负责此效果。在悬停时，它是动画宽度（即缓慢地改变宽度）

 $("ul#navigation").hover(function(){
                $('ul#navigation').stop().animate({'width':'150px'},200);
            },
            function () {
                $('ul#navigation').stop().animate({'width':'0px'},200);
            }
        );

JQuery，隐藏菜单的<li>和<ul>，仅在悬停时显示</ul> </li>

2 个答案: