当前位置：首页 > jquery

jquery菜单

2026-03-02 11:25:03jquery

jQuery 菜单实现方法

使用 jQuery 创建动态菜单可以通过多种方式实现，以下是几种常见的方法：

基础下拉菜单实现 通过 jQuery 的 toggle() 方法显示/隐藏子菜单：

$(document).ready(function(){
  $('.menu-item').hover(
    function(){ $(this).find('.submenu').stop(true,true).slideDown(200); },
    function(){ $(this).find('.submenu').stop(true,true).slideUp(200); }
  );
});

对应 HTML 结构：

<ul class="menu">
  <li class="menu-item">
    主菜单1
    <ul class="submenu">
      <li>子项1</li>
      <li>子项2</li>
    </ul>
  </li>
</ul>

可折叠手风琴菜单 使用 jQuery UI 的 accordion 组件：

jquery菜单

$("#accordion").accordion({
  collapsible: true,
  heightStyle: "content"
});

HTML 结构：

<div id="accordion">
  <h3>Section 1</h3>
  <div>内容1</div>
  <h3>Section 2</h3>
  <div>内容2</div>
</div>

响应式导航菜单 针对移动设备的响应式设计：

$('.menu-toggle').click(function(){
  $('.main-nav').slideToggle();
});

CSS 媒体查询：

jquery菜单

@media (max-width: 768px) {
  .main-nav { display: none; }
  .menu-toggle { display: block; }
}

带动画效果的菜单 添加 CSS3 过渡效果：

$('.menu-item').hover(
  function(){ $(this).addClass('active'); },
  function(){ $(this).removeClass('active'); }
);

CSS 样式：

.submenu {
  transition: all 0.3s ease;
  opacity: 0;
}
.menu-item.active .submenu {
  opacity: 1;
}

注意事项

确保引入 jQuery 库：<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
对于复杂交互建议使用 jQuery UI 或第三方插件如 Superfish
移动端考虑添加触摸事件支持
注意 ARIA 属性以实现无障碍访问