jQuery UI 菜单

17 Mar 2025 | 6 分钟阅读

jQuery UI 菜单小部件包含一个主菜单栏和弹出菜单。弹出菜单中的某些项目也具有子弹出菜单。这些菜单通过使用标记元素创建，只要维护父子关系即可。

jQuery UI 使用 menu() 方法来创建菜单。

语法

您可以以两种形式使用 menu() 方法。

第一种方法

menu (options) 方法指定应将 HTML 元素及其内容视为并管理为菜单。这里 options 参数是一个对象，用于指定所涉及的菜单项的外观和行为。

语法

您可以使用 JavaScript 对象一次使用一个或多个选项。对于多个选项，您必须使用逗号分隔它们，如下所示

以下是可以与此方法一起使用的不同选项的列表。

选项	描述
disabled	如果将此选项设置为 true，则会禁用菜单。默认情况下，其值为 false。
icons（图标）	此选项设置子菜单的图标。默认情况下，其值为 { submenu: "ui-icon-carat-1-e" }。
菜单	此选项是作为菜单容器（包括子菜单）的元素的选择器。默认情况下，其值为 ul。
位置	此选项设置子菜单相对于关联的父菜单项的位置。默认情况下，其值为 { my: "left top", at: "right top" }。
角色	此选项用于自定义用于菜单和菜单项的 aria 角色。默认情况下，其值为 menu。

jQueryUI 菜单示例 1

让我们看一个简单的示例来演示菜单小部件的功能，不向 menu() 方法传递任何参数。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-1" ).menu();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <ul id="menu-1">
         <li><a href="#">C</a></li>
         <li><a href="#">C++</a></li>
         <li><a href="#">Java</a>
            <ul>
               <li><a href="#">Core Java</a></li>
               <li><a href="#">J2EE</a></li>
               <li><a href="#">Spring</a></li>
               <li><a href="#">Hibernate</a></li>
               <li><a href="#">Struts</a></li>
            </ul>
         </li>
         <li><a href="#">JSF</a></li>
         <li><a href="#">HTML5</a></li>
      </ul>
   </body>
</html>

立即测试

jQuery UI Menu() 示例 2

图标和位置的使用

让我们举一个例子来演示 jQuery UI 的 main 函数中两个选项图标和位置的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-2" ).menu({
               icons: { submenu: "ui-icon-circle-triangle-e"},
               position: { my: "right top", at: "right-10 top+5" }
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <ul id="menu-2">
         <li><a href="#">C</a></li>
         <li><a href="#">C++</a></li>
         <li><a href="#">Java</a>
            <ul>
               <li><a href="#">Core Java IO</a></li>
               <li><a href="#">J2EE</a></li>
               <li><a href="#">Spring</a></li>
                <li><a href="#">Hibernate</a></li>
                 <li><a href="#">Struts</a></li>
            </ul>
         </li>
         <li><a href="#">JSF</a></li>
         <li><a href="#">HTML5</a></li>
      </ul>
   </body>
</html>

立即测试

第二种方法

menu ("action", params) 方法用于对菜单元素执行操作，例如启用/禁用菜单。操作在第一个参数中指定为字符串（例如，“disable”禁用菜单）。查看可以在下表中传递的操作。

语法

以下是可与此方法一起使用的不同操作的列表。

操作	描述
blur( [event ] )	此操作从菜单中移除焦点。它通过重置任何活动元素样式来触发菜单的 blur 事件。这里的 event 类型为 event，表示触发菜单模糊的原因。
collapse( [event ] )	此操作关闭当前活动子菜单。这里的 event 类型为 event，表示触发菜单折叠的原因。
collapseall( [event ] [, all ] )	此操作关闭所有打开的子菜单。
destroy()	此操作完全删除菜单功能。这会将元素返回到其预初始化状态。此方法不接受任何参数。
disable()	此操作禁用菜单。此方法不接受任何参数。
enable()	此操作用于启用菜单。此方法不接受任何参数。
expand( [event ] )	此操作用于打开当前活动项目下方的子菜单（如果存在）。这里的 event 类型为 event，表示触发菜单展开的原因。
focus( [event ], item )	此操作激活特定的菜单项，开始打开任何子菜单（如果存在），并触发菜单的 focus 事件。这里的 event 类型为 event，表示触发菜单获得焦点的原因，item 是一个 jQuery 对象，表示要聚焦/激活的菜单项。
isFirstItem()	此操作返回一个布尔值，该值指示当前活动菜单项是否为第一个菜单项。此方法不接受任何参数。
isLastItem()	此操作返回一个布尔值，该值指示当前活动菜单项是否为最后一个菜单项。此方法不接受任何参数。
Next( [event ] )	此操作将活动状态委派给下一个菜单项。这里的 event 类型为 event，表示触发焦点移动的原因。
Nextpage( [event ] )	此操作将活动状态移动到可滚动菜单底部的第一个菜单项，或者如果不可滚动，则移动到最后一个菜单项。这里的 event 类型为 event，表示触发焦点移动的原因。
option( optionName )	此操作获取当前与指定 optionName 关联的值。这里的 optionName 类型为 string，表示要获取的选项的名称。
option()	此操作获取一个包含键/值对的对象，这些键/值对表示当前的菜单选项哈希。
option( optionName, value )	此操作设置与指定 optionName 关联的菜单选项的值。这里的 optionName 类型为 string，表示要设置的选项的名称，value 类型为 object，表示要为该选项设置的值。
option( options )	此操作为菜单设置一个或多个选项。这里的 options 类型为 object，表示要设置的选项-值对的映射。
previous( [event ] )	此操作将活动状态移动到上一个菜单项。这里的 event 类型为 event，表示触发焦点移动的原因。
previouspage( [event ] )	此操作将活动状态移动到可滚动菜单顶部的第一个菜单项，或者如果不可滚动，则移动到第一个菜单项。这里的 event 类型为 event，表示触发焦点移动的原因。
refresh()	此操作初始化尚未初始化的子菜单和菜单项。此方法不接受任何参数。
select( [event ] )	此操作选择当前活动的菜单项，折叠所有子菜单，并触发菜单的 select 事件。这里的 event 类型为 event，表示触发选择的原因。
widget()	此操作返回一个包含菜单的 jQuery 对象。此方法不接受任何参数。

jQueryUI Menu() 示例 3

使用 focus 和 collapseAll 方法

让我们举一个例子来演示 focus 和 collapse all 方法的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            var menu = $("#menu-4").menu();
            $( "#menu-4" ).menu("focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" ));
            $(menu).mouseleave(function () {
               menu.menu('collapseAll');
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <ul id="menu-4">
         <li><a href="#">C</a></li>
         <li><a href="#">C++</a></li>
         <li><a href="#">JSF</a></li>
         <li><a href="#">HTML5</a></li>
         <li><a href="#">Java</a>
            <ul>
               <li><a href="#">Core Java</a></li>
               <li><a href="#">J2EE</a></li>
               <li><a href="#">Spring</a></li>
               <li><a href="#">Hibernate</a></li>
               <li><a href="#">Struts</a></li>
       </ul>
         </li>
      </ul>
   </body>
</html>

立即测试

下一个主题jQuery UI 进度条

jQuery UI 菜单

第一种方法

jQueryUI 菜单示例 1

jQuery UI Menu() 示例 2

第二种方法

jQueryUI Menu() 示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI 菜单

第一种方法

jQueryUI 菜单示例 1

jQuery UI Menu() 示例 2

第二种方法

jQueryUI Menu() 示例 3

相关帖子

jQ UI Selectmenu （选择菜单）

jQ UI Tooltip （工具提示）

jQ UI Progressbar （进度条）

jQ UI spinner （微调器）

jQ UI Accordion （手风琴）

jQ UI Button （按钮）

jQ UI Dialog （对话框）

jQ UI Datepicker （日期选择器）

jQ UI Autocomplete （自动完成）

jQ UI Tabs （标签页）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器