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

📌 相关文章

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

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

jQuery UI 菜单 destroy() 方法

简介

destroy() 方法是 jQuery UI 菜单的一种方法，用于销毁菜单并还原相关元素的状态。当你需要在页面加载完成后销毁动态生成的菜单时，可以使用该方法。

方法原型

$( ".Selector" ).menu( "destroy" )

参数说明

Selector：菜单元素的选择器，例如 #menu 或 .menu-class

返回值

该方法没有返回值。

使用方法

在页面加载完成后，使用 menu() 方法创建菜单，并保存其实例，如下所示。

let menuInstance = $( "#menu" ).menu();

当你需要销毁该菜单时，使用 destroy() 方法，如下所示。

menuInstance.menu( "destroy" );

示例代码

<!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-3.2.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
            let menuInstance = $( "#menu" ).menu();
            $('#destroyButton').click(function() {
                menuInstance.menu( "destroy" );
            });
        });
    </script>
</head>
<body>
    <ul id="menu">
        <li class="ui-state-disabled"><div>Toys (n/a)</div></li>
        <li><div>Books</div></li>
        <li><div>Clothing</div></li>
        <li><div>Electronics</div></li>
        <li><div>Home (n/a)</div></li>
        <li><div>Music</div></li>
        <li><div>Software</div></li>
        <li><div>Tools</div></li>
    </ul>
    <button id="destroyButton">销毁菜单</button>
</body>
</html>

注意点

destroy() 方法仅销毁菜单，不会删除相关元素。如果需要删除相关元素，需要手动删除。
该方法只能销毁程序创建的菜单，不能销毁系统默认的右键菜单。如果需要禁用右键菜单，应该使用 contextmenu 事件的 preventDefault() 方法，如下所示。

$(document).on('contextmenu', function(e) {
    e.preventDefault();
});