Javascript 垂直菜单滑动动画不'；我不能正常工作

我正在使用垂直菜单导航，但当菜单悬停时，垂直线不会滑动到正确的位置。而且，当它被点击时，垂直线不会停留。有人能解决这些错误吗

功能选择导航（获取此信息）{
$（“#sticky li”）.removeClass（'selected'）；
获取此.classList.add（'selected'）；
}

。在页面菜单>。在页面菜单中{
线高：2米；
高度：2米；
}
.在页面菜单>.在页面菜单li>中.在页面菜单li>中{
显示：块；
填充：0.2em；
}
.在页面菜单中li:last child:：after，li.selected:：after{
内容：“；
位置：绝对位置；
背景：rgba（255,99,71,0.6）；
高度：2.5em；
边缘顶部：15px；
左：40px；
宽度：2米；
排名：0；
过渡：所有易进易出。2s；
右：0；
}
.在页面菜单中li.所选：：之后{
转换：translateY（-2.5em）；
}
.在页面菜单中li:n子项（1）：悬停~li:last-child:：after{
转换：translateY（0.5em）！重要；
}
.在页面菜单中li:n子项（2）：悬停~li:last-child:：after{
转换：translateY（83px）！重要；
}
.在页面菜单中li:n子项（2）。选择~li:last child:：after{
转换：translateY（83px）！重要；
}
.在页面菜单中li:n子项（3）：悬停~li:last-child:：after{
转换：translateY（7.5em）！重要；
}
.在页面菜单中li:n子项（3）。选择~li:last child:：after{
变换：translateY（7.5em）；
}
.在页面菜单中li:n子项（4）：悬停~li:last-child:：after{
转换：translateY（10.5em）！重要；
}
.在页面菜单中li:n子项（4）。选择~li:last child:：after{
变换：translateY（10.5em）；
}
.在页面菜单中li:n子项（5）：悬停~li:last-child:：after{
转换：translateY（237px）！重要；
}
.在页面菜单中li:n子项（5）。选择~li:last child:：after{
transform:translateY（237px）；
}
.在页面菜单中--垂直a{
左边距：-1px；
左边框：2px实心#eae8e7；
填充：0.625em 0 1.625em 1.0625em；
}
.在第a页菜单中{
字体系列：“蒙特塞拉特之光”，无衬线；
字体大小：400；
-webkit字体平滑：抗锯齿；
颜色：#7676；
字体大小：14px；
显示：块；
过渡：所有150ms；
}
.在页面菜单垂直a中{
左边距：-1px；
左边框：3倍实心透明；
填充：0.625em 0.625em 1.0625em；
}
.在第a页菜单中{
-webkit字体平滑：抗锯齿；
显示：块；
-webkit转换：所有150ms；
过渡：所有150ms；
}

您的代码存在多个问题。以下是这些问题及其解决方案：

您没有将jQuery包含到代码段中（可能它只是在这个站点上，而不是在您的代码中）。包括在内

您将

em

与

px

混合使用。这绝不是一个好主意。修正：

• 对于页面菜单li中的

  。项目，我通过添加
  框大小：边框框
  ，确保其高度一致，这将在高度计算中包括任何填充和边框，否则不会

• 将所有的

  px

  尺寸替换为

  em

  ，并对位置进行有根据的猜测。它可能不准确，但对于这些项目来说看起来不错

始终移动用于悬停的垂直线。

• 通过从所选的

  类选择器中删除
  ~li:last child
  部分，修复了此问题。这样可以确保所选菜单项始终具有垂直线

Javascript有很多问题。固定人：

• 使用jQuery

  addClass

  函数添加所选的

  类

• 更改了

  removeClass

  行的选择器以查找匹配项

注释

• 添加了一些样式以最初隐藏悬停垂直线。如果希望在加载页面时有一行，请将选定的类添加到所需的菜单项中
• 如果要更改菜单项高度，还必须更新

  translateY

  位置

工作演示

功能选择导航（获取此信息）{
$（'li.selected'）.removeClass（'selected'）；
$（get_this）.addClass（'selected'）；
}

页面菜单中的

{
列表样式：无；
左侧填充：0；
}
。在页面菜单>。在页面菜单中{
线高：2米；
高度：2米；
框大小：边框框；
}
.在页面菜单>.在页面菜单li>中.在页面菜单li>中{
显示：块；
填充：0.2em；
}
.在页面菜单中li:last child:：after，li.selected:：after{
内容：“；
位置：绝对位置；
背景：rgba（255,99,71,0.6）；
高度：2.5em；
边缘顶部：15px；
左：8px；
宽度：2米；
排名：0；
过渡：所有易进易出。2s；
右：0；
}
.在页面菜单中li:最后一个子项：：之后{
可见性：隐藏；
}
.在页面菜单中li:hover~li:last child:：after{
能见度：可见；
}
.在页面菜单中li:n子项（1）：悬停~li:last-child:：after{
变换：translateY（0）！重要；
}
.在页面菜单li中：第n个子项（1）.选定：：之后{
变换：translateY（0）！重要；
}
.在页面菜单中li:n子项（2）：悬停~li:last-child:：after{
转换：translateY（3em）！重要；
}
.在页面菜单li中：第n个子项（2）.选定：：之后{
转换：translateY（3em）！重要；
}
.在页面菜单中li:n子项（3）：悬停~li:last-child:：after{
转换：translateY（6em）！重要；
}
.在页面菜单li中：第n个子项（3）.选定：：之后{
转化：translateY（6em）；
}
.在页面菜单中li:n子项（4）：悬停~li:last ch