创建滑动菜单

回到课程

创建一个在点击时打开/折叠的菜单：

P.S. 源文档的 HTML/CSS 将被修改。

打开一个任务沙箱。

HTML/CSS

首先，让我们创建 HTML/CSS。

菜单是页面上的一个独立图形组件，所以最好把它放入一个单独的 DOM 元素中。

菜单项的列表可以被作为列表 ul/li 列出。

下面是示例结构：

          <div class="menu">
  <span class="title">Sweeties (click me)!</span>
  <ul>
    <li>Cake</li>
    <li>Donut</li>
    <li>Honey</li>
  </ul>
</div>
        

我们对标题使用 <span>，因为 <div> 有一个隐式的 display:block，它会占据 100% 的水平宽度。

就像这样：

          <div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>

因此，如果我们在它上面设置 onclick，那么它也会捕获文本右侧的点击。

……由于 <span> 有一个隐式的 display: inline，它恰好占据了足以容纳所有文本的位置：

          <span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>

切换菜单

切换菜单应更改箭头并显示/隐藏菜单列表。

所有这些更改都可以通过 CSS 完美处理。在 JavaScript 中，我们应该通过添加/移除 .open 类来标记菜单的当前状态。

没有它，菜单就会被关闭：

          .menu ul {
  margin: 0;
  list-style: none;
  padding-left: 20px;
  display: none;
}

.menu .title::before {
  content: '▶ ';
  font-size: 80%;
  color: green;
}
        

……有 .open 后，箭头会改变，列表会出现：

          .menu.open .title::before {
  content: '▼ ';
}

.menu.open ul {
  display: block;
}
        

使用沙箱打开解决方案。