Question

我设法使用javascript设计了一个垂直菜单，但是在尝试添加子菜单时我失败了。

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

任何人都可以给我一个关于如何在第一级添加子菜单的提示吗？

感谢。

-

我设法通过这个jquery代码使它工作，不确定这是否是最好的做法，但运作良好。

Relatório

function toggle_visibility(id) {
  var e = document.getElementById(id);
  
  if (e.style.display == 'block') {
    e.style.display = 'none';
  } else {
    e.style.display = 'block';
  }
}

<li>
  <div class="dl_parent">
    <span onclick="toggle_visibility('dl_sub_dd');">
      <a href="#">Relatório <span class="caret" style="margin-left: 10px;"></span></a>
    </span>
    <div id="dl_sub_dd">
      <ul>
        <li><a href="#">Secretaria</a></li>
        <li><a href="#">Tesouraria</a></li>
        <li><a href="#">Tesouraria</a></li>
        <li><a href="#">Chancelaria</a></li>
      </ul>
    </div>
</li>

Answer 1

主要CSS菜单原则

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

对于嵌套菜单，只需将父级菜单窗格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=...>

子菜单就像它的父菜单一样扩展，除了你必须给出窗格id以便你可以将用户事件与他们想要扩展的子菜单相关联。（对于孙子窗格，你需要使用不同的子孙，通常遵循一个简单的模式。）

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

层叠样式设计

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

让您的机械师先工作，然后在多台设备上进行测试时调整您的风格，并改变您的桌面窗口宽度。

选择和关联您的活动

根据您所需的行为，您可以使用onclick或onmouseover来触发相应的更改。鼠标悬停事件很快，但如果布局紧凑，有时对用户来说太快了。

优雅表演和隐藏力学

在响应式设计中，根据显示宽度或媒体类型，菜单和子菜单的扩展方式会变得棘手。

使用三次多项式有一些方法可以减慢显示或扩展的机制或写入出现或淡化的速度。人们喜欢插入的大多数图书馆组件都不是那么复杂。它们有时提供线性一级力学。尽管如此，许多人喜欢它们，因为它提供了开箱即用的基础知识，跨浏览器测试和响应式设计。

通常，只有几行JavaScript会提供机械优雅，并且它会保存额外的HTTP活动并使您的代码保持高可见性，尤其是如果您至少将您的功能和变量命名为高中毕业生。

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

1 个答案: