Question

通过单击“ #sidebarnav>li”：
1）它的第二个子元素-<ul>元素将展开，其类在"collapse"和"collapse in"之间切换

2）"#sidebarnav>li"获得“活动”类别。

3）<a>和<ul>标签中的“ aria-expanded”属性变为“ true”

我想在单击其父元素时平滑扩展ul元素，但我无法实现。试图向类“ height 500ms ease-in-out”添加过渡：collapse in样式，但无效。那么如何使其工作呢？在Fiddle

上检查一下

<!--language: lang-html-->
<nav class="sidebar-nav">
    <ul class="in" id="sidebarnav">
        <li> 
           <a class="has-arrow waves-effect waves-dark" aria-expanded="false" href="#">
              <span class="hide-menu">Dashboard</span>
           </a>
           <ul class="collapse" aria-expanded="false">
            <li><a href="index.html">Minimal </a></li>
            <li><a href="index2.html">Analytical</a></li>
            <li><a href="index3.html">Demographical</a></li>
            <li><a href="index4.html">Modern</a></li>
         </ul>
       </li>
    </ul>
 </nav>

Answer 1

不幸的是，您无法为height设置百分比值的动画，因此最好的方法是使用transform。

如果您需要“扩展”效果，则必须使用JavaScript。 transform的使用方法如下：

将ul包围在一个容器中：

<div class="collapse-container">
  <ul class="collapse" aria-expanded="false">
    [...]
  </ul>
</div>

隐藏容器上的溢出内容，以使ul不重叠：

.collapse-container {
  overflow: hidden;
}

为translateY上的.in设置动画：

.collapse {
  transition: transform 250ms ease-in-out;
  transform: translateY(-100%);
}

.collapse.in {
  transform: translateY(0%);
}

Here's a working Fiddle.（我将JS更改为可与容器元素一起使用）

如何顺利扩展元素

1 个答案: