Question

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

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过渡

高度是否可以实现：0和高度：自动？

如果不是，我如何更改代码以便转换效果成为可能？我在“所有”和“身高”都试过了，但这没有做任何事情。

Answer 1

很遗憾，您无法在height和0之间转换auto，但您可以将max-height - 属性转换为0和某个固定值。

我已更新您的小提示以显示示例：http://jsfiddle.net/ydXs9/2/

这个解决方案显然不太理想，但如果您的菜单项高度大致相等，那么就可以获得很好的效果。

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

jQuery初学者：如何在使用toggleClass（“open”）时添加css转换？

1 个答案: