创建滑动菜单
重要性：5
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;
}