Jquery 100%宽度滑动多级ULs

我正在使用一个导航系统，我希望父级

ul

和所有子级

uls

跨越100%的宽度，当您与子级

ul

单击一个

li

时，父级滑向左侧，子级滑向右侧。以下是我目前掌握的情况：

$（函数（）{
$（'.list container ul>li.has child'）。每个（函数（）{
$（this.find（'ul'）.prepend（'li class=“back”>）；
});
$（文档）。在（'单击'，'上。列出容器ul>li'，函数（e）{
e、 停止传播（）；
var children=$（this.find（'ul'）；
if（！$（this）.hasClass（'back'））{
如果（children.length>0）{
$（this.parent（）.css（'left'，'-100%）；
$（this.find（'ul>li'）.css（'display'，'block'）；
$（this.find（'ul'）.css（'left'，'100%）；
}
}
});
$（文档）.on（'click'，'li.back'，函数（e）{
e、 停止传播（）；
$（this.parent（）.parent（）.parent（）.css（'left'，'0'）；
$（this.parent（）.css（'left'，'200%）；
});
});
html，正文{
身高：100%；
保证金：0；
}
.列表容器{
溢出：隐藏；
宽度：100%；
}
保险商实验室{
宽度：100%；
列表样式类型：无；
填充：0；
保证金：0；
位置：绝对位置；
过渡：所有0.5s缓解；
}
李{
填充：10px 0 10px 15px；
边框底部：1px纯黑；
}
李：有孩子了吗{
显示：内联块；
内容：“>”；
浮动：对；
右边距：15px；
}
li>ul{
显示：块；
左：200%；
排名：0；
}
li>ul>li{
显示：无；
}


测试1

测试1子菜单

测试1子菜单


测试1子菜单a


测试2

测试2子菜单
测试2子菜单a

测试2子菜单




测试3

测试3子菜单
测试3子菜单a

测试3子菜单






该代码按照第一级/第二级项目的预期工作，
但一旦你尝试点击进入第三级（即“测试1
子菜单“）它变得一团糟

这是因为，您将
ul
移位一个常量
200%
，而子
ul
将移位一个常量
+/-100%
。同时在
0
处重置主
ul
。除此之外，当您使用显示块显示菜单时，不会将其隐藏。虽然这适用于第一个级别，但从第二个级别开始，它会分离

我现在意识到，如果使用div来
这不是uls

是的，使用
div
s可能会更好，因为与分层
ul
s相比，您更容易处理这些问题。但是，对于层次结构，
ul
将更具语义

如果您不想更改HTML结构，那么最简单也是最好的选择就是指定每个子菜单中的
级别。这可以通过简单地在每个具有更多子项的
li
上添加
data-
属性来实现，您可以去掉
.has child
类。一旦在
数据-
属性中定义了级别，就可以使用这些属性将每个级别移动相应的因子

下面是一个粗略的演示。请注意，尽管您已经用
jQuery
标记了它，但我还是用普通的旧vanila JavaScript创建了这个演示，因为这对我来说更简单、更快。如果愿意，您可以将其转换为jQuery，但如果不这样，它应该可以正常工作，不会出现任何问题

演示小提琴：

演示片段：


//将事物保留在全局范围之外
（功能（窗口、文档）{
var attachTo=document.getElementsByClassName（'list-container'）[0]；
prepareNav（attachTo）；//将导航附加到div
函数prepareNav（nav）{
//通过创建反向链接、设置样式并单击处理程序来准备导航
变量
navBar=nav.firstElementChild，
navElems=nav.querySelectorAll（'li[数据级别]>ul'）
;
对于（i=0；i
*{框大小：边框框；边距：0；填充：0；字体系列：无衬线；}
html，正文{高度：100%；}
.list容器{
溢出：隐藏；位置：相对；
宽度：100%；最小高度：128px；
}
.列出容器ul{
宽度：100%；背景色：eee；
列表样式类型：无；
位置：绝对；左侧：0%；顶部：0%；
过渡：所有。5s轻松；
}