Question

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

我有点理解为什么我会丢失整个列表，但无法弄清楚如何在mouseout上重新启动顶部链接。

    $('.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>

Answer 1

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

的列表

您正在设置

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

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

点击此处的小提琴：http://jsfiddle.net/eR2y9/1/

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

关于mouseout的丢失下拉列表信息

1 个答案: