0

我做了一个初学者尝试制作垂直导航菜单，父母在悬停时打开该菜单：

HTML

<ul class="pages-list">
   <li class="page_item">Grand Parent 1
      <ul class="first-children">
         <li class="page_item">Parent 1</li>
         <li class="page_item">Parent 2 (hover me)
            <ul class="children">
               <li class="page_item">Child 1</li>
               <li class="page_item">Child 2
                  <ul class="children">
                      <li class="page_item">Grandchild 1</li>
                      <li class="page_item">Grandchild 2</li>
                      <li class="page_item">Grandchild 3</li>
                 </ul>
              </li>
               <li class="page_item">Child 3</li>
            </ul>
         </li>
         <li class="page_item">Parent 3 (hover me)
            <ul class="children">
               <li class="page_item">Child 1</li>
               <li class="page_item">Child 2</li>
               <li class="page_item">Child 3</li>
            </ul>
         </li>
         <li class="page_item">Parent 4</li>
      </ul>
   </li>
</ul>

CSS

.first-children > .page_item > .children.open {
    height:auto;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: height 1s ease;
    -ms-transition: height 1s ease;
    transition: all 1s ease;
}
.first-children > .page_item > .children {
    height: 0;
    overflow:hidden;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: height 1s ease;
    -ms-transition: height 1s ease;
    transition: all 1s ease;
}

（尝试了所有和高度的过渡）

jQuery

$(document).ready(function(){
  $(".first-children > .page_item").hover(function(){
    $(this).find("> .children").toggleClass("open");
  });
});

结果 http://jsfiddle.net/senlin/DVUZ5/

现在我想要的是在孩子们接受课程开放时使用 CSS 过渡

height:0 和 height: auto 是否有可能？

如果不是，我需要如何更改代码以使过渡效果成为可能？我在“全部”和“高度”上都试过了，但这没有任何作用。

4

1 回答 1

1

不幸的是，您不能在andheight之间转换，但您可以在 0 和某个固定值之间转换 -property。0automax-height

我已经更新了你的小提琴来展示一个例子：http: //jsfiddle.net/ydXs9/2/

这种解决方案显然并不理想，但如果您的菜单项的高度大致相等，您可以通过这种方式获得不错的结果。

如果您的子菜单的高度差异很大，您最好使用jQuery.animate。

于 2013-10-13T10:38:03.970 回答