在 jQuery EasyUI 中，菜单按钮（Menu Button）将普通按钮与下拉菜单结合，点击或悬停即可展开操作选项。本文通过 HTML 标记与属性配置演示其创建方法，无需额外 JavaScript 即可实现联动效果，并提供关键参数说明与完整示例，便于快速集成到项目中。

菜单按钮的组成与工作原理

菜单按钮（Menu Button）由链接按钮（Link Button）和菜单（Menu）两部分组成。当用户点击按钮或将鼠标悬停在按钮上时，系统会自动显示关联的下拉菜单。该组件基于 EasyUI 的声明式初始化机制，仅需在 HTML 中正确绑定菜单 ID，即可自动完成事件监听与渲染，无需手动编写 JavaScript 代码。

HTML 标记实现步骤

创建菜单按钮的核心是定义一个带有 easyui-menubutton 类的链接按钮，并通过 menu 属性指向对应的菜单容器。以下为完整实现示例：

    Edit
    Help


    
Undo
    
Redo
    

    
Cut
    
Copy
    
Paste
    

    
Delete
    
Select All


    
Help
    
Update
    
About

上述代码中，外层

用于包裹按钮并提供基础样式；两个 标签分别绑定 #mm1 和 #mm2 菜单；菜单项通过

定义，menu-sep 类用于插入分隔线。

关键配置属性说明

菜单按钮的行为由以下核心属性控制：

• menu：指定关联菜单的 jQuery 选择器（如 #mm1），必须与目标菜单容器的 id 一致。
• iconCls：设置按钮左侧显示的图标样式类，如 icon-edit、icon-help 等，依赖 EasyUI 内置图标库。
• href：按钮链接地址，通常设为 # 以避免页面跳转。

菜单项同样支持 iconCls 属性，用于在选项前添加图标；menu-sep 类用于在菜单中插入视觉分隔线，提升选项分组可读性。

使用注意事项

• 确保页面已正确引入 jQuery 和 EasyUI 的核心 CSS/JS 文件，否则组件无法自动初始化。
• 菜单容器必须设置明确的 id，且 menu 属性值需以 # 开头匹配该 ID。
• 若需动态修改菜单内容或绑定点击事件，可通过 JavaScript 调用 EasyUI 提供的 API 进行扩展，但基础展示功能无需额外脚本。
• 按钮与菜单的宽度可通过内联样式或外部 CSS 控制，建议为菜单容器设置固定宽度以避免布局偏移。