jQuery手风琴菜单

jQuery手风琴菜单是一种常见的交互式网页组件，它通过JavaScript库jQuery来实现动态内容折叠和展开效果。用户通常可以通过点击导航链接（通常是图标或文字）来切换内容面板，就像常见的文件夹结构一样，每次点击会展开或收起相应的内容区域。

创建一个基本的手风琴菜单主要包括以下几个步骤：

1. HTML结构：首先，定义一个包含若干`<div>`的容器，每个`<div>`代表一个独立的面板，还有激活状态的链接元素。

   <ul class="accordion">
     <li><a href="#panel1">标题1</a></li>
     <li><a href="#panel2">标题2</a></li>
     <!-- ... -->
   </ul>
   <div id="panel1" class="panel">...</div>
   <div id="panel2" class="panel">...</div>
   <!-- ... -->

2. CSS样式：给`.panel`和激活状态的链接添加相应的样式，比如默认隐藏内容、改变链接颜色等。

3. jQuery脚本：使用`.click()`事件处理程序，当链接被点击时，检查当前激活的面板，然后调整CSS来显示或隐藏对应的面板。

   $(document).ready(function() {
     $('.accordion a').click(function(e) {
       e.preventDefault(); // 阻止默认的行为（防止页面跳转）
       
       var $this = $(this),
           activePanel = $('div.active');
       
       if (!activePanel.is($this.next())) { // 如果不是相邻的面板
         activePanel.slideUp('slow'); // 缩小并隐藏当前激活的面板
         $this.next().slideToggle('slow', function() { // 展开或收起目标面板
           $this.parent('li').addClass('active').siblings().removeClass('active');
         });
       }
     });
   });