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

📌 相关文章

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

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

jQuery UI 菜单 collapse() 方法

简介

collapse() 方法是 jQuery UI 菜单中提供的一个用于折叠菜单项的方法。通过 collapse() 方法可以将菜单项折叠起来，当用户需要展开时再展开菜单项。这个方法可以提高页面视觉效果和交互性，使得用户能够更加方便地访问内容和导航。

语法

jQuery UI 菜单的 collapse() 方法的语法如下：

$( ".selector" ).menu( "collapse", event, item )

参数说明：

.selector：必需。表示需要应用 collapse() 方法的元素的选择器。
event：必需。表示一个 jQuery 事件对象，触发 collapse() 方法的事件。
item：可选。表示需要折叠的菜单项的选择器，如果省略，则折叠所有菜单项。

注意事项

调用 collapse() 方法时需要注意以下几点：

event 参数必须是一个有效的 jQuery 事件对象，不能省略。
item 参数可以省略，省略时将折叠所有菜单项。
调用 collapse() 方法时，菜单项必须已经被初始化并可用。

示例代码

下面是一个使用 collapse() 方法的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery UI 菜单 collapse() 方法示例</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>
    <style>
        .ui-menu .ui-menu-item {
            margin: 0;
            padding: 0;
            width: 100%;
        }
        .ui-submenu {
            display: none;
            position: absolute;
            top: -2px;
            left: 100%;
        }
        .ui-menu .ui-submenu-open {
            display: block;
        }
    </style>
    <script>
        $(function() {
            $( "#menu" ).menu();
            $( "#collapse-button" ).button().click(function() {
                $( "#menu" ).menu( "collapse" );
            });
        });
    </script>
</head>
<body>
    <div id="menu">
        <ul>
            <li>
                <div>菜单项 1</div>
                <ul>
                    <li><div>子菜单项 1.1</div></li>
                    <li><div>子菜单项 1.2</div></li>
                </ul>
            </li>
            <li>
                <div>菜单项 2</div>
                <ul>
                    <li><div>子菜单项 2.1</div></li>
                    <li><div>子菜单项 2.2</div></li>
                </ul>
            </li>
        </ul>
    </div>
    <button id="collapse-button">折叠菜单</button>
</body>
</html>

这个示例代码中，定义了一个默认的 jQuery UI 菜单，其中包含了两个菜单项和两个子菜单项。然后定义了一个 collapse-button 按钮，用于触发 collapse() 方法折叠菜单。在 JavaScript 代码中，首先对菜单和按钮进行初始化和绑定，然后在按钮的 click() 事件中调用 collapse() 方法即可。