我做了一个初学者尝试制作垂直导航菜单,父母在悬停时打开该菜单:
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 是否有可能?
如果不是,我需要如何更改代码以使过渡效果成为可能?我在“全部”和“高度”上都试过了,但这没有任何作用。