基于jQuery实现以手风琴方式展开和折叠导航菜单

实现手风琴方式展开和折叠导航菜单的基本思路是利用jQuery控制CSS属性，以此来控制导航菜单的展开与折叠。具体方法如下：

1. 确定HTML结构

首先需要在HTML中编写出具有手风琴效果的导航菜单的基本结构，一般情况下，导航菜单的HTML结构如下：

<ul class="accordion-menu">
   <li class="menu-li">
      <a href="#">菜单1</a>
      <ul class="sub-menu">
         <li><a href="#">子菜单1</a></li>
         <li><a href="#">子菜单2</a></li>
         <li><a href="#">子菜单3</a></li>
      </ul>
   </li>
   <li class="menu-li">
      <a href="#">菜单2</a>
      <ul class="sub-menu">
         <li><a href="#">子菜单4</a></li>
         <li><a href="#">子菜单5</a></li>
         <li><a href="#">子菜单6</a></li>
      </ul>
   </li>
</ul>

2. 编写CSS样式

编写CSS样式，给菜单增加基本样式，这些样式包括展开菜单的宽度、颜色等。下面是代码示例：

.accordion-menu {
   width: 300px;
   margin: 0 auto;
   background-color: #f6f6f6;
   list-style: none;
   overflow: hidden;
   padding: 0;
}

.menu-li {
   width: 100%;
}

.menu-li a {
   width: 100%;
   display: block;
   padding: 15px;
   background-color: #fff;
   font-size: 18px;
   border-bottom: 1px solid #ddd;
   text-decoration: none;
   color: #333;
   transition: all 0.3s ease-in-out;
}

.menu-li.active a {
   background-color: #f3f3f3;
   color: #007fff;
}

.sub-menu {
   padding: 0;
   margin-top: -5px;
   overflow: hidden;
   transition: all 0.3s ease-in-out;
}

.sub-menu li {
   display: block;
   width: 100%;
}

.sub-menu li a {
   width: 100%;
   display: block;
   padding: 10px;
   background-color: #007fff;
   color: #fff;
   font-size: 16px;
   text-decoration: none;
   transition: all 0.3s ease-in-out;
}

.sub-menu li a:hover {
   background-color: #0077cc;
}

3. 利用jQuery实现手风琴菜单效果

实现手风琴菜单的代码如下：

jQuery(document).ready(function($) {
   $('.menu-li > a').click(function(e) {
      e.preventDefault();
      if ($(this).parent().hasClass('active')) {
         $(this).parent().removeClass('active');
         $('.sub-menu', $(this).parent()).slideUp(100);
      } else {
         $('.menu-li.active .sub-menu').slideUp(100);
         $('.menu-li.active').removeClass('active');
         $(this).parent().addClass('active');
         $('.sub-menu', $(this).parent()).slideDown(100);
      }
   });
});

在这段代码中，首先在DOM加载完毕后使用jQuery的ready事件处理程序，然后为导航菜单中的每个一级菜单添加点击事件，当点击菜单时会发生两种情况。如果当前菜单已经处于激活状态，则按当前状态执行，否则移除当前已经处于激活状态的菜单，将新的菜单设置为激活状态，并展开该菜单。

4. 示例

下面有两个示例，分别展示了手风琴菜单效果的实现：

示例1

点击查看示例1

示例2

点击查看示例2

综上所述，以上是基于jQuery实现以手风琴方式展开和折叠导航菜单的完整攻略。