javascript - css3 过渡下拉onclick

Question

在以下示例中，当您单击单击我 时，将打开一个导航菜单。

Example

有谁知道如何将 css3 过渡下拉效果应用到 navigation-dropdown，因为没有 :onclick 在 css 中？*

* 同时将 navigation-dropdown 保持在自动高度(我不想要下拉菜单的固定高度)。

代码:(完整代码见示例)

<div id="navigation">
  <div id="navigation-sub">Click me</div>
</div>

<div id="navigation-dropdown">
  <ul>
    <li><a href="#">link one</a></li>
    <li><a href="#">link two</a></li>
    <li><a href="#">link three</a></li>
    <li><a href="#">link four</a></li>
  </ul>
  <ul>
    <li><a href="#">link five</a></li>
    <li><a href="#">link six</a></li>
    <li><a href="#">link seven</a></li>
    <li><a href="#">link eight</a></li>
  </ul>
  <ul>
    <li><a href="#">link nine</a></li>
    <li><a href="#">link ten</a></li>
    <li><a href="#">link eleven</a></li>
    <li><a href="#">link twelve</a></li>
  </ul>
  <input type="button" value="X"/>
</div>

Answer 1

您应该只在点击时切换一个类并使用过渡。

CSS

#navigation-dropdown {
    transition: 3s ease-out;
}
.hide {
    opacity: 0;
    height: 0 !important;
}

JS

function dropIt() {
    toggleClass(document.getElementById('navigation-dropdown'), "hide");
}

Demo