jQuery UI 菜单 destroy() 方法(1)

📌 相关文章

📜 jQuery UI 菜单 destroy() 方法(1)

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

jQuery UI 菜单 destroy() 方法

简介

destroy() 方法是 jQuery UI 菜单（menu）组件提供的方法之一，用于销毁菜单组件。该方法取消菜单组件的事件绑定，移除生成的 DOM 元素，释放占用的内存等。

语法

$( ".selector" ).menu( "destroy" );

selector：选择器，指定要销毁的菜单组件。

示例

以下示例会在页面上生成一个菜单，并绑定一个按钮点击事件，在点击按钮时销毁菜单组件。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery UI 菜单 destroy() 方法示例</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
    <button id="btn1">销毁菜单组件</button>
    <ul id="menu">
      <li><a href="#">菜单项 1</a></li>
      <li><a href="#">菜单项 2</a></li>
      <li><a href="#">菜单项 3</a></li>
    </ul>
    <script>
      $( function() {
        $( "#menu" ).menu();
        $( "#btn1" ).click( function() {
          $( "#menu" ).menu( "destroy" );
        });
      });
    </script>
  </body>
</html>

点击按钮后，可以发现菜单已经被销毁，无法再进行操作。

返回值

该方法无返回值。

注意事项

销毁菜单组件后，需要重新调用 menu() 方法来生成新的菜单。
销毁菜单组件后，原菜单的事件绑定将无法触发。
销毁菜单组件前，应先卸载菜单下的所有子菜单和菜单项，以防止内存泄漏。可以使用 menu( "collapseAll" ) 方法来将菜单折叠起来，然后再进行销毁操作。