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

【问题标题】：JQuery, hide <li> and <ul> of menu, show only on hoverJQuery，隐藏菜单的 <li> 和 <ul>，仅在悬停时显示
【发布时间】：2013-06-14 12:07:42
【问题描述】：

示例：http://jsfiddle.net/sUm2W/

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

当页面加载时，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>

谢谢:)

【问题讨论】：

用jsfiddle.net提供一个例子
似乎很难为不可见的元素触发鼠标悬停事件。但肯定有一些解决方法
jsfiddle.net/sUm2W 按要求提供示例。如您所见，线条显示在开头，需要悬停才能摆脱它们。从那时起，菜单功能应有尽有（除了我不知道 40px 边距来自哪里）。谢谢

标签： jquery menu hover hide

【解决方案1】：

不确定我是否全部理解，但一个简单的
$("ul#navigation").hide() 和 $("ul#navigation").show() 可以工作，不是吗？

【讨论】：

对不起，我明白了。我知道我的问题很难回答。当页面加载时，菜单应该是最小的，这些行应该被隐藏（li's），但它们不是。我现在添加了一个示例来说明我的意思。谢谢你的回复:)

【解决方案2】：

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

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

【讨论】：

对不起，我明白了。我知道我的问题很难回答。当页面加载时，菜单应该是最小的，这些行应该被隐藏（li's），但它们不是。我现在添加了一个示例来说明我的意思。谢谢你的回复:)
首先关于 40px 边距，它默认用于所有无序列表项。你可以考虑用 dl/dt 标签替换 ul/li 标签（见w3schools.com/tags/tag_dl.asp）。这将消除 40px 问题。接下来关于启动时的显示列表项。我相信保持 width: 0 不会隐藏它们。我建议将您的列表保留在 div 标签中，并为 div 保留 display:none。但是要使它们再次可见，至少显示一些符号，例如 + 或菜单，如果发生鼠标悬停，则会触发一些 jquery 代码以再次显示。不确定你是否可以在不可见的项目上触发事件。