使用javascript将子菜单添加到垂直菜单。

Question

我成功地使用javascript设计了一个垂直菜单，但在尝试向其中添加子菜单时，我失败了。

下面是示例http://www.bootply.com/isPSKNdGCG#

有人能给我一个提示，如何添加在第一层下打开的子菜单？

谢谢。

--

我设法让它通过jquery代码工作，不确定这是否是最佳实践，但效果很好。

​

• 雷拉托里奥

函数toggle_visibility(id) { var e= document.getElementById(id)；if (e.style.display == 'block') { e.style.display = 'none'；}=={ e.style.display =‘e.style.display’；}}

Answer 1

初级CSS菜单原则

典型的解决方案是修改div上的CSS显示或CSS可见性属性。后两者将需要一个不透明的背景和更高的Z索引菜单窗格。您的示例代码使用了这两种设计中的第一种，这在大多数设计中都比较慢，也不太漂亮。

对于嵌套菜单，只需在父菜单窗格li内嵌套div-ul-li按钮层次结构。

<button onwhatever=...> <!-- optional -->
<div class='parent-menu'>
  <ul>
    <li>
      <button onwhatever=...>
      <div id=...>
        <ul>
          <li>
            <button onwhatever=...>
            <div id=...>
              <ul>
                <li>
                  <button onclick=...>

子菜单就像它的父菜单一样展开，只是你必须给出窗格ids，这样你才能把用户事件和他们想要展开的子菜单关联起来。(对于孙辈窗格，您需要使用不同的子ids和外孙ids，通常遵循一个简单的模式。)

更好的HTML5结构设计是使用按钮标签而不是输入标签或重复使用ul容器和按钮的div标签。如果您使用这种更干净、更易读的结构，也可以使用窗格中的按钮来保持一致性。这样，您总是处理按钮事件来驱动您的扩展、收缩和最终菜单选择操作。

级联式设计

您只需要一个CSS类。其他所有内容都可以相对于div.parent菜单库选择CSS。如何使用块、内联或其他布局在很大程度上取决于页面设计，并可能根据浏览器的视图端口宽度实时切换。另外，响应性页面设计通常会根据媒体类型更改菜单布局。

让您的机械工作首先，然后调整您的风格，当您测试多个设备和改变您的桌面窗口宽度。

选择和关联您的事件

根据您想要的行为，您可以使用onclick或onmouseover来触发适当的更改。鼠标越事件越快，但如果布局紧凑，有时对用户来说太快了。

优美显示与隐藏力学

在响应设计中，在菜单和子菜单如何根据显示的宽度或媒体类型展开时，您可能会遇到棘手的问题。

有一些方法可以减缓显示或扩展的机制，或者使用三次多项式来减缓书写出现或消退的速度。大多数人们喜欢插入的库组件并不是那么复杂。它们有时提供线性一级力学。尽管如此，许多人还是喜欢它们，因为它提供了开箱即用、跨浏览器测试和响应性设计的基本功能。

通常，只有几行JavaScript将提供机械的优雅，它节省了额外的HTTP并保持代码高度可见，特别是如果您将函数和变量命名为至少与高中毕业生一样。