jQuery 初学者 : how to add css transition when using toggleClass ("open")?

Question

我做了一个初学者尝试制作一个垂直导航菜单， parent 可以在悬停时打开它:

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/

现在我想要的是在 children 收到开课时使用 CSS 过渡

使用 height:0 和 height: auto 甚至可能吗？

如果不是，我需要如何更改代码才能实现过渡效果？我在“所有”和“高度”上都试过了，但这没有任何作用。

Answer 1

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

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

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

如果您的子菜单高度变化很大，您最好使用 jQuery.animate .