JQuery滑动切换嵌套列表关闭打开列表不起作用

在使用jQuery实现滑动切换嵌套列表的功能时，如果遇到关闭和打开列表不起作用的问题，可能是由于以下几个原因导致的：

基础概念

jQuery：一个快速、简洁的JavaScript库，简化HTML文档遍历、事件处理、动画和Ajax交互。 滑动切换：通过动画效果实现元素的展开和收起。

可能的原因及解决方法

选择器问题：
- 确保你使用的选择器正确地选中了目标元素。
- 示例代码：
- 示例代码：

事件冒泡：
- 如果嵌套层次较深，点击子元素可能会触发父元素的事件，导致行为异常。
- 解决方法：使用event.stopPropagation()阻止事件冒泡。
- 示例代码：
- 示例代码：
初始状态问题：
- 确保嵌套列表的初始状态（显示或隐藏）设置正确。
- 示例代码：
- 示例代码：
动画冲突：
- 如果页面上有多个滑动切换效果，可能会出现动画冲突。
- 解决方法：使用.stop(true, true)清除之前的动画队列。
- 示例代码：
- 示例代码：
JavaScript错误：
- 检查控制台是否有JavaScript错误，可能是其他脚本影响了滑动切换功能。
- 解决方法：修复或移除错误脚本。

示例代码

以下是一个完整的示例，展示了如何实现嵌套列表的滑动切换功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Slide Toggle Example</title>
    <style>
        ul ul {
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul>
        <li>Item 1
            <ul>
                <li>Sub Item 1.1</li>
                <li>Sub Item 1.2</li>
            </ul>
        </li>
        <li>Item 2
            <ul>
                <li>Sub Item 2.1</li>
                <li>Sub Item 2.2</li>
            </ul>
        </li>
    </ul>

    <script>
        $(document).ready(function() {
            $('ul').on('click', 'li', function(event) {
                event.stopPropagation();
                $(this).find('ul').stop(true, true).slideToggle();
            });
        });
    </script>
</body>
</html>