鼠标悬停时丢失下拉列表信息答案

【问题标题】：Losing dropdown list info on mouseout鼠标悬停时丢失下拉列表信息
【发布时间】：2013-02-12 21:27:10
【问题描述】：

我建立了一个简单的下拉列表，其中填充了各种链接。它包含大约 50 个项目，所以我将它包装在一个 div 中以使其可滚动。问题是，当我鼠标移出时，我会丢失整个列表，除非前两个列表元素正在显示。我将此下拉菜单构建为子菜单，前两个链接作为各种“容器”。

我有点理解为什么我会丢失整个列表，但不知道如何让顶部链接在鼠标移出时重新出现。

    $('.myMenu > li').bind('mouseover', openSubMenu);
function openSubMenu() { 
         $('.myMenu').css('overflow','auto');
         $('.myMenu').css('height','400px');
         $('.ulMenu').css('visibility', 'visible');
};
$('.myMenu > li').bind('mouseout', closeSubMenu);
function closeSubMenu() {
         $('.myMenu').css('overflow','hidden');
         $('.myMenu').css('height','20px');
       $('.ulMenu').css('visibility', 'hidden');
  }
}
</script>




<div id="menu">
  <ul class="myMenu">
    <li id="li_left"><a href="#">   Application </a></li>
      <li id="li"> <a href="#"> Hover For Listing</a>
          <ul id="tasksUl" class="ulMenu">
          </ul>
        </li>
    </ul>
</div>

【问题讨论】：

你能给我们一个例子 jsfiddle 吗？从快速 sacn 看，代码看起来有点奇怪。
我正在尝试说话......我应该提一下，这是来自共享点网站的内容编辑器 webpart......

标签： javascript jquery mouseout

【解决方案1】：

我认为您还必须为列表发布您的 .css。我想你有一个菜单，你想在悬停时打开一个列表 <li id="li"> <a href="#"> Hover For Listing</a>

你正在设置一个

$('.myMenu').css('height','20px');

我不明白你为什么要这么做。此外，您的 .css 样式也已被弃用。

在这里检查小提琴：http://jsfiddle.net/eR2y9/1/

像魅力一样工作。您无需为菜单添加高度，因为它会根据内部条目的数量进行动态调整。此外，如果设置为不显示，则不会占用任何空间。如果您还有其他问题或我误解了您的问题，请随时回复我的帖子，我会为您找到解决方案。

【讨论】：