AI 智能体开发技术方案
2026/6/13 4:57:52
jQuery UI Menu（菜单）实例
Menu是 jQuery UI 中用于创建下拉菜单、上下文菜单或导航菜单的组件。它基于无序列表<ul>结构，支持多级子菜单、图标、禁用项、分隔线等。常用于下拉导航、工具菜单、右键上下文菜单。
官方演示地址：https://jqueryui.com/menu/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础垂直菜单（带子菜单）
鼠标悬停或点击展开子菜单。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Menu 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script><style>#menu{width:200px;}</style></head><body><ulid="menu"><li><ahref="#">文件</a><ul><li><ahref="#">新建</a></li><li><ahref="#">打开</a></li><li><ahref="#">保存</a></li><liclass="ui-state-disabled"><ahref="#">另存为（禁用）</a></li><li><div>分隔线</div></li><!-- 分隔线 --><li><ahref="#">退出</a></li></ul></li><li><ahref="#">编辑</a><ul><li><ahref="#">撤销</a></li><li><ahref="#">重做</a></li></ul></li><li><ahref="#">帮助</a><ul><li><ahref="#">关于</a></li></ul></li></ul><script>$(function(){$("#menu").menu();});</script></body></html>2.带图标的菜单
使用 jQuery UI 内置图标类ui-icon-*。
<ulid="menu-icons"><li><ahref="#"><spanclass="ui-icon ui-icon-disk"></span>保存</a></li><li><ahref="#"><spanclass="ui-icon ui-icon-print"></span>打印</a></li><li><ahref="#"><spanclass="ui-icon ui-icon-trash"></span>删除</a></li><li><ahref="#"><spanclass="ui-icon ui-icon-heart"></span>收藏</a></li></ul><script>$("#menu-icons").menu({icons:{submenu:"ui-icon-triangle-1-e"}// 子菜单箭头});</script><style>.ui-menu .ui-icon{vertical-align:middle;margin-right:8px;}</style>3.下拉菜单（结合 Button）
将 Menu 作为下拉菜单使用。
<buttonid="menu-btn">操作<spanclass="ui-icon ui-icon-triangle-1-s"></span></button><ulid="dropdown-menu"style="display:none;"><li><ahref="#">选项1</a></li><li><ahref="#">选项2</a></li><li><ahref="#">选项3</a></li></ul><script>$("#dropdown-menu").menu();$("#menu-btn").click(function(e){$("#dropdown-menu").menu("toggle");// 切换显示$("#dropdown-menu").position({my:"left top",at:"left bottom",of:this});e.preventDefault();});</script>4.事件监听（select） + 禁用项
<script>$("#menu").menu({select:function(event,ui){console.log("选中菜单项："+ui.item.text());alert("你选择了："+ui.item.text());}});</script>小技巧：
- 分隔线：使用
<li><div>---</div></li>或<li class="ui-menu-divider"></li> - 右键上下文菜单：需额外插件（如 jQuery Context Menu），jQuery UI 原生不支持直接右键。
- 水平菜单：需自定义 CSS 或使用 Menubar 插件（jQuery UI 官方有规划但未正式发布）。
Menu 组件适合构建结构化导航。如果你需要水平顶部导航菜单、右键上下文菜单（使用第三方插件），或动态加载菜单项的示例，请提供更多细节！