Javascript 使用JS/jquery的多级侧栏菜单

我需要有一个响应侧栏导航（作为使网站响应的一部分）的深度3多层次菜单。html标记如下所示

<nav>
    <div data-level="1">
        <ul>
            <li class="main-menu">
                Level1
                <div data-level="2">
                    <ul>
                        <li class="submodule">
                            example1.1
                            <div data-level="3">
                                <ul>
                                    <li>example1.1.1</li>
                                    <li>example1.1.2</li>
                                    <li>example1.1.3</li>
                                </ul>
                            </div>
                        </li>
                        <li class="submodule">
                            example1.2
                            <div data-level="2">
                                <ul>
                                    <li>example1.2.1</li>
                                    <li>example1.2.2</li>
                                    <li>example1.2.3</li>
                                </ul>
                            </div>
                        </li>
                        <li class="submodule">
                            example1.3
                            <div data-level="2">
                                <ul>
                                    <li>example1.3.1</li>
                                    <li>example1.3.2</li>
                                    <li>example1.3.3</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                Level2
                <div data-level="2">
                    <ul>
                        <li>
                            example2.1
                            <div data-level="3">
                                <ul>
                                    <li>example2.1.2</li>
                                    <li>example2.1.3</li>
                                    <li>example2.1.4</li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            example2.2
                            <div data-level="2">
                                <ul>
                                    <li>example2.2.1</li>
                                    <li>example2.2.2</li>
                                    <li>example2.2.3</li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            example2.3
                            <div data-level="2">
                                <ul>
                                    <li>example2.3.1</li>
                                    <li>example2.3.2</li>
                                    <li>example2.3.4</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>           
        </ul>
    </div>
</nav>

一级


例1.1

例1.1.1
例1.1.2
例1.1.3



例1.2

例1.2.1
例1.2.2
例1.2.3



例1.3

例1.3.1
例1.3.2
例1.3.3





二级


例2.1

示例2.1.2
例2.1.3
例2.1.4



例2.2

例2.2.1
例2.2.2
例2.2.3



例2.3

例2.3.1
例2.3.2
例2.3.4

第一个菜单只显示顶层

级别1
二级

单击Level 1时，应显示菜单

返回主菜单
示例1.1
例1.2

单击example1.1时

返回子级
示例1.1.1
示例1.1.2
例1.1.3

每个“后退”按钮都会先进入菜单

---

如何使用JS/jQuery进行导航？

有必要稍微调整一下您的导航-级别2的导航缺少

子模块

类。此外，您可以考虑调整< <代码> <代码>的用法，因为您只在第二和第三子级导航中使用它，而第一个子级别在<代码> <代码>中。以下导航满足您的要求，但尚未完成-您可以对其进行调整，以便在单击主导航时切换可见的子级别导航。我已经注意到了这个问题，在同一时间只有一个主导航和子模块导航可见

$（“.main menu”）。在（“单击”，函数（）{
if（$（“.main menu”）.not（this.find（“.submodule”）.is（“：visible”））{
$（“.main menu”）.not（this）.find（“>div[data level='2']，.submodule”）.hide（）；
}
$（this.find（“>div[data level='2']，.submodule”）.toggle（）；
});
$（“.submodule”）。在（“单击”上，函数（e）{
e、 停止传播（）；
$（“.submodule”）.not（this）.each（function（）{
if（$（this）.find（“>div[data level='3']”，>div[data level='2']”）是（“：可见”））{
$（this.find（“>div[data level='3']，>div[data level='2']））.hide（）；
}
});
$（this.find（“>div[data level='3']，>div[data level='2']））.toggle（）；
});
$（.submodule.back”）。在（“单击”上，函数（e）{
e、 停止传播（）；
$（this）.closest（“.main menu”）.find（“>div[data level='2']，.submodule”）.hide（）；；
});
$（“.back”）.not（“.submodule”）.on（“单击”，函数（e）{
e、 停止传播（）；
$（this）.closest（“.submodule”）.find（“>div[data level='3']，>div[data level='2']）。hide（）；
});
div[data level=“2”]{
显示：无；
}
div[数据级别=“3”]{
显示：无；
}
.子模块{
显示：无；
}



一级


返回主菜单


例1.1

返回下级
例1.1.1
例1.1.2
例1.1.3



例1.2

返回下级
例1.2.1
例1.2.2
例1.2.3