javascript - 当父 ul 设置为隐藏溢出时，子 ul 不显示

Question

HTML

 <div id="gadget">
 <span id="nav_up">UP</span>
    <ul>
       <li>LIST1
           <ul>
             <li>Child1.1</li>
             <li>Child1.2</li>
           </ul>
       </li>
       <li>LIST2
           <ul>
             <li>>Child2.1</li>
           </ul>
       </li>
       <li>LIST3
           <ul>
             <li>>Child3.1</li>
           </ul>
       </li>
    </ul>
 <span id="nav_down">Down</span>
 </div>

CSS

  #gadget{width:75px; height: 100%;}
  #gadget ul{height:450px; width:100%; overflow:hidden;}
  #gadget ul li ul{display:none;}
  #gadget ul li:hover ul{display:block;}

JS

$('#nav_down').click(
    function () {
        $('#gadget ul').animate({scrollTop: '100px'}, 800);
    }
);

$('#nav_up').click(
    function () {
        $('#gadget ul').animate({scrollTop: '0px'}, 800);
    }
);

在这里点击<span>上下，小工具<ul>会根据溢出上下移动。但是当溢出：隐藏应用时，孩子<ul>没有显示。当我删除它时，子<ul>显示但<span>滚动不起作用。我该如何解决这个问题？

Answer 1

我相信问题是你所有的 UL 都是高度：450px，只将高度应用于顶部元素会解决问题吗？

 #gadget > ul{height:450px; width:100%; overflow:hidden;}

Answer 2

添加 position:absolute 到子元素

Answer 3

您的嵌套 ul 需要绝对定位并正确滚动抓取 body 元素并应用 animate 方法http://jsfiddle.net/PJ3gp/

#gadget ul li ul{display:none;position:absolute;}