javascript - 垂直菜单滑动动画不能正常工作

Question

我正在处理垂直菜单导航，但是当菜单悬停时，垂直线不会在正确的位置滑动。此外，当它被点击时，垂直线不会停留。有没有人有解决这些错误的方法？

function selectNav(get_this){
  $('#sticky li').removeClass('selected');
  get_this.classList.add('selected');
}

.in-page-menu > .in-page-menu li{

  line-height: 2em;
  height: 2em;

}

.in-page-menu > .in-page-menu li > .in-page-menu li a {
  display: block;
  padding: 0 2em;
}

.in-page-menu li:last-child::after, li.selected::after {
  content: "";
  position: absolute;
  background: rgba(255, 99, 71, 0.6);
  height: 2.5em;
  margin-top: 15px;
  left: 40px;
  width: .2em;
  top: 0;
  transition: all ease-in-out .2s;
  right: 0;
}
.in-page-menu li.selected::after{
  transform: translateY(-2.5em);
}
.in-page-menu li:nth-child(1):hover ~ li:last-child::after {
  transform:translateY(0.5em) !important;
}

.in-page-menu li:nth-child(2):hover ~ li:last-child::after {
  transform:translateY(83px) !important;

}
.in-page-menu li:nth-child(2).selected ~  li:last-child::after {
  transform:translateY(83px) !important;
}

.in-page-menu li:nth-child(3):hover ~  li:last-child::after {
  transform:translateY(7.5em) !important;
}
.in-page-menu li:nth-child(3).selected ~  li:last-child::after {
  transform:translateY(7.5em);
}
.in-page-menu li:nth-child(4):hover ~  li:last-child::after {
  transform:translateY(10.5em) !important;
}
.in-page-menu li:nth-child(4).selected ~  li:last-child::after {
  transform:translateY(10.5em);
}
.in-page-menu li:nth-child(5):hover ~  li:last-child::after {
  transform:translateY(237px) !important;
}
.in-page-menu li:nth-child(5).selected ~  li:last-child::after {
  transform:translateY(237px);
}

.in-page-menu--vertical a{
  margin-left: -1px;
  border-left: 2px solid #eae8e7;
  padding: 0.625em 0 1.625em 1.0625em;
}
.in-page-menu a{
  font-family: 'montserratlight', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #767676;
  font-size: 14px;
  display: block;
  transition: all 150ms;
}

.in-page-menu-vertical a{
  margin-left: -1px;
  border-left: 3px solid transparent;
  padding: 0.625em 0 0.625em 1.0625em;
}

.in-page-menu a{
  -webkit-font-smoothing: antialiased;
  display: block;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}

<ul class="in-page-menu in-page-menu--vertical" id="sticky">
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#change-content">Change your content web easily</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-order">Manage your order</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#inventory">Inventory management</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-relationship">Manage your relationship</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#bcommerce">B2B commerce</a>
                </li>
                <li></li>
</ul>

DEMO

所以，我希望它看起来像这样:SHOPIFY

我还在 jsfiddle 上做了演示。太感谢了!您的帮助将不胜感激:)

Answer 1

您的代码存在多个问题。在这里他们和他们的解决方案:

1. 您没有将 jQuery 包含到您的代码段中(也许它只是在这个网站上而不是在您的代码中)。包括在内。
2. 您将 em 与 px 混合在一起。这绝不是一个好主意。修复:
   • 对于 .in-page-menu li 项，我通过添加 box-sizing: border-box 确保它们的高度一致，这将包括任何padding 和 border 进入高度计算，否则不会。
   • 将所有 px 大小替换为 em，并对位置进行有根据的猜测。它可能不准确，但对于这些元素来说看起来不错。
3. 您总是移动用于悬停的垂直线。
   • 通过从 selected 类选择器中删除 ~ li:last-child 部分来修复它。这可确保所选菜单项始终有一条垂直线。
4. Javascript 有很多问题。修正者:
   • 使用 jQuery addClass 函数添加 selected 类。
   • 更改了 removeClass 行的选择器以找到匹配项

注意事项

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

工作演示

function selectNav(get_this){
  $('li.selected').removeClass('selected');
  $(get_this).addClass('selected');
}

.in-page-menu{
  list-style: none;
  padding-left: 0;
}

.in-page-menu > .in-page-menu li{
  line-height: 2em;
  height: 2em;
  box-sizing: border-box;
}

.in-page-menu > .in-page-menu li > .in-page-menu li a {
  display: block;
  padding: 0 2em;
}

.in-page-menu li:last-child::after, li.selected::after {
  content: "";
  position: absolute;
  background: rgba(255, 99, 71, 0.6);
  height: 2.5em;
  margin-top: 15px;
  left: 8px;
  width: .2em;
  top: 0;
  transition: all ease-in-out .2s;
  right: 0;
}

.in-page-menu li:last-child::after {
  visibility: hidden;
}

.in-page-menu li:hover ~ li:last-child::after {
  visibility: visible;
}

.in-page-menu li:nth-child(1):hover ~ li:last-child::after {
  transform:translateY(0) !important;
}

.in-page-menu li:nth-child(1).selected::after{
  transform: translateY(0) !important;
}

.in-page-menu li:nth-child(2):hover  ~ li:last-child::after{
  transform:translateY(3em) !important;

}
.in-page-menu li:nth-child(2).selected::after {
  transform:translateY(3em) !important;
}

.in-page-menu li:nth-child(3):hover ~  li:last-child::after {
  transform:translateY(6em) !important;
}
.in-page-menu li:nth-child(3).selected::after {
  transform:translateY(6em);
}
.in-page-menu li:nth-child(4):hover ~  li:last-child::after {
  transform:translateY(9em) !important;
}
.in-page-menu li:nth-child(4).selected::after {
  transform:translateY(9em);
}
.in-page-menu li:nth-child(5):hover ~  li:last-child::after {
  transform:translateY(12em) !important;
}
.in-page-menu li:nth-child(5).selected::after {
  transform:translateY(12em);
}

.in-page-menu--vertical a{
  margin-left: -1px;
  border-left: 2px solid #eae8e7;
  padding: 0.625em 0 1.625em 1.0625em;
}
.in-page-menu a{
  font-family: 'montserratlight', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #767676;
  font-size: 14px;
  display: block;
  transition: all 150ms;
}

.in-page-menu-vertical a{
  margin-left: -1px;
  border-left: 3px solid transparent;
  padding: 0.625em 0 0.625em 1.0625em;
}

.in-page-menu a{
  -webkit-font-smoothing: antialiased;
  display: block;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="in-page-menu in-page-menu--vertical" id="sticky">
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#change-content">Change your content web easily</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-order">Manage your order</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#inventory">Inventory management</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-relationship">Manage your relationship</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#bcommerce">B2B commerce</a>
                </li>
                <li></li>
</ul>