jquery怎么实现折叠菜单效果

发布时间：2022-03-31 09:46:43 作者：iii
来源：亿速云阅读：1269

# jQuery怎么实现折叠菜单效果

折叠菜单是网页交互设计中常见的组件，能够有效节省页面空间并提升用户体验。本文将详细介绍如何使用jQuery实现折叠菜单效果，包含基础实现、动画优化、事件处理等完整方案。

## 一、基础HTML结构

首先需要构建符合语义化的HTML结构，推荐使用无序列表`<ul>`嵌套实现层级关系：

```html
<div class="menu-container">
  <ul class="main-menu">
    <li>
      <a href="#">一级菜单1</a>
      <ul class="sub-menu">
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">一级菜单2</a>
      <ul class="sub-menu">
        <li><a href="#">二级菜单3</a></li>
        <li><a href="#">二级菜单4</a></li>
      </ul>
    </li>
  </ul>
</div>

二、基础CSS样式

为菜单添加基本样式，默认隐藏子菜单：

.menu-container {
  width: 250px;
  font-family: Arial, sans-serif;
}

.main-menu, .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sub-menu {
  display: none; /* 默认隐藏子菜单 */
  padding-left: 15px;
}

.menu-item {
  position: relative;
}

.menu-item > a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.menu-item > a:hover {
  background-color: #f5f5f5;
}

.has-submenu::after {
  content: "+";
  position: absolute;
  right: 15px;
}

三、jQuery基础实现

1. 引入jQuery库

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 基础折叠功能实现

$(document).ready(function() {
  // 给所有包含子菜单的项添加标记
  $('.menu-item:has(.sub-menu)').addClass('has-submenu');
  
  // 点击事件绑定
  $('.has-submenu > a').click(function(e) {
    e.preventDefault();
    
    // 获取相邻的子菜单
    var submenu = $(this).next('.sub-menu');
    
    // 切换当前子菜单显示状态
    submenu.slideToggle(200);
    
    // 切换图标
    $(this).parent().toggleClass('active');
    $(this).parent().find('::after').text(
      $(this).parent().hasClass('active') ? '-' : '+'
    );
  });
});

四、功能增强实现

1. 手风琴效果（只保持一个子菜单展开）

$('.has-submenu > a').click(function(e) {
  e.preventDefault();
  
  // 关闭其他展开的子菜单
  $('.sub-menu').not($(this).next('.sub-menu')).slideUp(200);
  $('.has-submenu').not($(this).parent()).removeClass('active');
  
  // 当前菜单切换
  $(this).next('.sub-menu').slideToggle(200);
  $(this).parent().toggleClass('active');
});

2. 添加动画效果增强

$('.has-submenu > a').click(function(e) {
  e.preventDefault();
  
  var submenu = $(this).next('.sub-menu');
  
  // 使用动画队列防止快速点击导致的问题
  if (!submenu.is(':animated')) {
    submenu.slideToggle({
      duration: 300,
      easing: 'easeOutQuad',
      start: function() {
        $(this).css('display', 'block');
      }
    });
  }
});

五、高级功能扩展

1. 记住菜单状态（使用Cookie/localStorage）

// 保存状态
function saveMenuState() {
  var states = [];
  $('.has-submenu').each(function() {
    states.push({
      id: $(this).find('> a').attr('href'),
      isOpen: $(this).hasClass('active')
    });
  });
  localStorage.setItem('menuStates', JSON.stringify(states));
}

// 恢复状态
function restoreMenuState() {
  var states = JSON.parse(localStorage.getItem('menuStates'));
  if (states) {
    states.forEach(function(state) {
      var item = $('.has-submenu > a[href="' + state.id + '"]');
      if (state.isOpen) {
        item.next('.sub-menu').show();
        item.parent().addClass('active');
      }
    });
  }
}

// 初始化时调用
$(document).ready(function() {
  restoreMenuState();
  
  $('.has-submenu > a').click(function() {
    // ...原有点击逻辑...
    saveMenuState();
  });
});

2. 响应式适配

function checkMenuMode() {
  if ($(window).width() < 768) {
    // 移动端模式：默认全部折叠
    $('.sub-menu').hide();
    $('.has-submenu').removeClass('active');
  } else {
    // PC模式：根据保存状态或默认展开一级
    restoreMenuState();
  }
}

$(window).resize(function() {
  checkMenuMode();
});

$(document).ready(function() {
  checkMenuMode();
});

六、完整代码示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery折叠菜单</title>
  <style>
    /* 前面列出的CSS样式 */
  </style>
</head>
<body>
  <!-- 前面列出的HTML结构 -->
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // 初始化菜单标记
      $('.menu-item:has(.sub-menu)').addClass('has-submenu');
      
      // 恢复保存的状态
      function restoreMenuState() {
        // 实现代码如前
      }
      
      // 响应式检查
      function checkMenuMode() {
        // 实现代码如前
      }
      
      // 主点击事件
      $('.has-submenu > a').click(function(e) {
        e.preventDefault();
        
        // 手风琴效果
        if (!$(this).parent().hasClass('active')) {
          $('.sub-menu').not($(this).next('.sub-menu')).slideUp(200);
          $('.has-submenu').not($(this).parent()).removeClass('active');
        }
        
        // 当前菜单动画
        $(this).next('.sub-menu').stop(true, true).slideToggle(200);
        $(this).parent().toggleClass('active');
        
        // 保存状态
        localStorage.setItem('menuStates', JSON.stringify(
          $('.has-submenu').map(function() {
            return {
              id: $(this).find('> a').attr('href'),
              isOpen: $(this).hasClass('active')
            };
          }).get()
        ));
      });
      
      // 初始化
      checkMenuMode();
      $(window).resize(checkMenuMode);
    });
  </script>
</body>
</html>

七、常见问题解决

快速点击导致动画堆积：
- 使用stop(true, true)清除动画队列
- 检查is(':animated')状态

移动端触摸事件冲突：

$('.has-submenu > a').on('click touchstart', function(e) {
 e.preventDefault();
 // 处理逻辑
});

性能优化建议：

使用事件委托减少绑定数量：


$('.menu-container').on('click', '.has-submenu > a', function(e) {
// 处理逻辑
});

通过以上步骤，您可以实现一个功能完善、用户体验良好的jQuery折叠菜单。根据实际需求，可以进一步自定义样式和交互细节。 “`

jquery怎么实现折叠菜单效果

二、基础CSS样式

三、jQuery基础实现

1. 引入jQuery库

2. 基础折叠功能实现

四、功能增强实现

1. 手风琴效果（只保持一个子菜单展开）

2. 添加动画效果增强

五、高级功能扩展

1. 记住菜单状态（使用Cookie/localStorage）

2. 响应式适配

六、完整代码示例

七、常见问题解决

相关阅读