css3过渡下拉onclick

Question

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

Example

有谁知道如何对 navigation-dropdown 应用 css3 过渡下拉效果，因为没有 :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