jQuery UI菜单collapseAll()方法

jQuery UI Menu 是一个强大的 JavaScript 库，它提供了许多选项和功能，以便创建自定义的菜单。其中，collapseAll() 方法用于折叠所有菜单项。以下是详细攻略，含两个示例，演示如何使用 collapseAll() 方法：

步骤1：引库

在使用之前，需要先 HTML 引入 jQuery 库和 jQuery UI 库。可以通过以下方式引入：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

步骤2：使用 collapseAll() 方法

使用 collapseAll() 方法可以通过以下方式实现：

示例1：折叠所有菜单项

以下是一个例子，演示如何使用 collapseAll() 方法折叠所有菜单项：

$(document).ready(function() {
  $("#menu").menu();
  $("#-button").click(function() {
    $("#menu").menu("collapseAll");
  });
});

在这个示例中，我们使用 $("#menu") 选择一个具有 id="menu" 的元素，并使用 .menu()将其转换为菜单。然后，我们使用 $("#collapse-button") 选择一个具有 id="collapse-button" 的元素，并使用 .click() 函数为其添加一个点击事件。在点击事件中，我们使用 $("#menu").menu("collapseAll") 方法折叠所有菜项。

示例2：折叠指定菜单项

以下是另一个示例，演示如何使用 collapseAll() 方法折叠指定菜单项：

$(document).ready(function() {
  $("#menu").menu();
  $("#collapse-button").click(function() {
    $("#menu").find(".ui-state-active").menu("collapseAll");
  });
});

在这个示例中，我们使用 $("#menu") 选择一个具有 id="menu" 的元素，并使用 .menu() 函数将其转换为菜单。然后，我们使用 $("#collapse-button") 选择一个具有 id="collapse-button" 的元素，并使用 .click() 函数为其添加一个点击事件。在点击事件中，我们使用 $("#menu").find(".ui-state-active") 选择当前处于活动状态的菜单项，并使用 .menu("collapseAll") 方法折叠它们。

总结

综上所述，使用 collapseAll() 方法可以轻松地折叠所有菜单项或指定菜单项。要使用 collapseAll() 方法，可以在菜单元素上使用 .menu("collapseAll") 方法。以上是两个示例，演示如何使用 collapseAll() 方法。