Question

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

有没有人知道如何将css3转换下拉效果应用于 导航 - 下拉列表 ，因为没有 ：onclick 在css中？ *

* ，同时在自动高度保留 导航 - 下拉列表 （I不要为下拉菜单设置固定的高度。）

代码：（请参阅整个代码的示例）

<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

css3转换下拉单击onclick

1 个答案: