jquery 无限级下拉菜单的简单实现代码

以下是一个使用jQuery实现的简单无限级下拉菜单的示例代码。请注意，为了保持简洁性，这个例子不包括样式部分，你可以根据需要使用CSS来美化下拉菜单的外观。

HTML 部分:

<ul id="dropdownMenu">
    <li><a href="#">选项 1</a>
        <ul>
            <li><a href="#">子选项 1-1</a>
                <ul>
                    <li><a href="#">子选项 1-1-1</a></li>
                    <li><a href="#">子选项 1-1-2</a></li>
                </ul>
            </li>
            <li><a href="#">子选项 1-2</a></li>
        </ul>
    </li>
    <li><a href="#">选项 2</a>
        <ul>
            <li><a href="#">子选项 2-1</a></li>
        </ul>
    </li>
</ul>

jQuery 部分:

$(document).ready(function() {
    // 隐藏所有子菜单
    $('#dropdownMenu ul').hide();

    // 当点击菜单项时，显示或隐藏其子菜单
    $('#dropdownMenu li').click(function(e) {
        // 阻止链接的默认行为
        e.stopPropagation();
        e.preventDefault();

        // 切换当前点击的li下的ul的显示状态
        $(this).children('ul').slideToggle();

        // 如果点击的是已经展开的菜单项，则关闭它
        if ($(this).children('ul').is(':visible')) {
            $(this).children('a').css('color', 'red'); // 可选：改变颜色以指示当前状态
        } else {
            $(this).children('a').css('color', ''); // 可选：恢复默认颜色
        }

        // 防止点击子菜单项时关闭父菜单
        $(this).children('ul').find('li').click(function(e) {
            e.stopPropagation();
        });
    });

    // 当点击菜单外部时，关闭所有展开的菜单
    $(document).click(function() {
        $('#dropdownMenu ul').hide();
        $('#dropdownMenu li a').css('color', ''); // 可选：恢复所有链接的默认颜色
    });
});

这个示例展示了如何使用jQuery来实现一个简单的无限级下拉菜单。首先，通过CSS选择器隐藏所有子菜单。然后，通过jQuery的`.click()`事件监听器来处理菜单项的点击事件，当点击一个菜单项时，使用`.slideToggle()`方法来显示或隐藏其子菜单。同时，为了防止点击子菜单项时触发父菜单的关闭事件，我们在子菜单项上也设置了`.click()`事件监听器，并调用了`e.stopPropagation()`来阻止事件冒泡。最后，当点击菜单外部时，通过监听整个文档的点击事件来关闭所有展开的菜单。