如何利用jQuery实现下拉菜单的多级展开

jquery

小樊

107

2024-10-15 05:26:49

栏目: 编程语言

要使用jQuery实现下拉菜单的多级展开，首先确保已经在HTML文件中引入了jQuery库。然后，可以通过以下步骤实现多级展开功能：

在HTML中创建一个具有多级结构的下拉菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 多级下拉菜单</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 5px 0;
        }
        .sub-menu {
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul>
        <li>菜单1
            <ul class="sub-menu">
                <li>子菜单1-1</li>
                <li>子菜单1-2</li>
                <li>子菜单1-3</li>
            </ul>
        </li>
        <li>菜单2
            <ul class="sub-menu">
                <li>子菜单2-1</li>
                <li>子菜单2-2</li>
            </ul>
        </li>
        <li>菜单3</li>
    </ul>
    <script>
        // 在这里编写jQuery代码
    </script>
</body>
</html>

编写jQuery代码以实现多级展开功能：

$(document).ready(function() {
    // 当点击一级菜单时，展开对应的子菜单
    $('li').on('click', function() {
        // 隐藏所有子菜单
        $('.sub-menu').hide();

        // 获取当前点击的一级菜单的子菜单
        var subMenu = $(this).find('.sub-menu');

        // 如果子菜单存在，则展开子菜单
        if (subMenu.length > 0) {
            subMenu.show();
        }
    });

    // 当点击子菜单时，阻止事件冒泡，以免触发一级菜单的点击事件
    $('.sub-menu').on('click', function(event) {
        event.stopPropagation();
    });
});

现在，当点击一级菜单时，对应的子菜单将展开。点击子菜单时，不会展开其他子菜单。这样就实现了使用jQuery实现的下拉菜单多级展开功能。

如何利用jQuery实现下拉菜单的多级展开

最新问答

相关标签