jquery实现具有收缩功能的垂直导航菜单

首先，为了实现具有收缩功能的垂直导航菜单，我们需要使用 jQuery 这个 JavaScript 库。接下来，我将为大家详细讲解具体的实现步骤：

编辑 HTML 代码

首先，我们需要编写 HTML 代码来创建我们的导航菜单。在这个示例中，我们创建一个具有两个主菜单和两个子菜单的垂直导航菜单。这个示例的 HTML 代码如下：

<nav id="main-nav">
  <ul>
    <li><a href="#">主菜单 1</a>
      <ul>
        <li><a href="#">子菜单 1</a></li>
        <li><a href="#">子菜单 2</a></li>
      </ul>
    </li>
    <li><a href="#">主菜单 2</a>
      <ul>
        <li><a href="#">子菜单 3</a></li>
        <li><a href="#">子菜单 4</a></li>
      </ul>
    </li>
  </ul>
</nav>

添加 CSS 样式

接下来，我们需要添加一些 CSS 样式来改变我们的垂直导航菜单的外观。这个示例的 CSS 样式如下：

#main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#main-nav li {
  position: relative;
}
#main-nav > ul > li {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
}
#main-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
}
#main-nav ul li:hover > ul {
  display: block;
}

上面的 CSS 样式中，我们为主菜单和子菜单分别设置了样式。同时，我们使用了 CSS 伪类来在鼠标悬停在主菜单上时显示对应的子菜单。

编写 JavaScript 代码

现在，我们需要添加一些 JavaScript 代码来实现具有收缩功能的垂直导航菜单。这个示例的 jQuery 代码如下：

$(document).ready(function() {
  $('#main-nav li:has(ul)').addClass('has-submenu');
  $('#main-nav li.has-submenu > a').click(function() {
    $(this).parent().toggleClass('active');
    $(this).next('ul').slideToggle(200);
    return false;
  });
});

上面的 jQuery 代码中，我们首先给包含子菜单的主菜单添加一个类名 has-submenu。然后，我们使用 click 事件和 slideToggle() 函数来实现收缩和展开子菜单的功能。

示例说明

示例一

假设我们现在想要在导航菜单中隐藏所有的子菜单。我们可以在 CSS 样式中将子菜单的 display 属性设置为 none。

#main-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
}

示例二

假设我们现在想要在导航菜单中添加一个具有三个级别的子菜单。我们只需要向 HTML 代码中添加更多的子菜单即可。

<nav id="main-nav">
  <ul>
    <li><a href="#">主菜单 1</a>
      <ul>
        <li><a href="#">子菜单 1-1</a></li>
        <li><a href="#">子菜单 1-2</a>
          <ul>
            <li><a href="#">子菜单 1-2-1</a></li>
            <li><a href="#">子菜单 1-2-2</a></li>
            <li><a href="#">子菜单 1-2-3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">主菜单 2</a>
      <ul>
        <li><a href="#">子菜单 2-1</a></li>
        <li><a href="#">子菜单 2-2</a></li>
      </ul>
    </li>
  </ul>
</nav>

这就是实现具有收缩功能的垂直导航菜单的完整攻略了。希望这个教程可以对大家有所帮助！