📌  相关文章
📜  jQuery UI 菜单 collapseAll() 方法(1)

📅  最后修改于: 2023-12-03 15:16:46.425000             🧑  作者: Mango

jQuery UI 菜单 collapseAll() 方法

简介

collapseAll() 方法是 jQuery UI 菜单组件提供的一个方法，用于将所有子菜单收起来。

用法
基本用法
$( ".selector" ).menu( "collapseAll" );

其中，.selector 表示菜单组件的选择器，可以是 ID 选择器、类选择器或元素选择器。

参数

collapseAll() 方法没有参数。

返回值

collapseAll() 方法没有返回值。

示例

以下示例展示了如何使用 collapseAll() 方法将菜单组件的所有子菜单收起来：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 菜单 collapseAll() 方法示例</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    .ui-menu {
      width: 200px;
    }
  </style>
  <script>
    $( function() {
      $( "#menu" ).menu();
      $( "#collapse-all" ).on( "click", function() {
        $( "#menu" ).menu( "collapseAll" );
      } );
    } );
  </script>
</head>
<body>
  <button id="collapse-all">收起所有子菜单</button>
  <ul id="menu">
    <li>
      <div><span>菜单 1</span></div>
      <ul>
        <li><div><span>子菜单 1-1</span></div></li>
        <li><div><span>子菜单 1-2</span></div></li>
        <li><div><span>子菜单 1-3</span></div></li>
      </ul>
    </li>
    <li>
      <div><span>菜单 2</span></div>
      <ul>
        <li><div><span>子菜单 2-1</span></div></li>
        <li><div><span>子菜单 2-2</span></div></li>
      </ul>
    </li>
    <li>
      <div><span>菜单 3</span></div>
      <ul>
        <li><div><span>子菜单 3-1</span></div></li>
        <li><div><span>子菜单 3-2</span></div></li>
        <li><div><span>子菜单 3-3</span></div></li>
        <li><div><span>子菜单 3-4</span></div></li>
      </ul>
    </li>
  </ul>
</body>
</html>

点击“收起所有子菜单”按钮后，所有子菜单都会被收起来。

总结

collapseAll() 方法是 jQuery UI 菜单组件提供的一个很实用的方法，可以通过代码将菜单组件中的所有子菜单收起来，提高用户体验。