javascript - 特定主导航链接的导航子菜单未正确显示

Question

不完全确定发生了什么，但是，对于我正在处理的这个 3 级导航，第二个链接无法正确显示子菜单。如果将鼠标悬停在我的 codepen 示例中的“产品”上，您将看到出现第三层子菜单项，这是不正确的。当您将鼠标悬停在第二层中的链接上时，某些不应该显示的第三层菜单项会显示。不过，第一个链接“关于我们”似乎工作正常，所以我很困惑。

https://codepen.io/gojiHime/pen/ymVNgW

let topLevel = $("li.menu-item-has-children > a");
let topLevelElement = $(".nav > li.menu-item-has-children");
let subMenuInnerLink = $(
  ".nav > li.menu-item-has-children > ul.sub-menu:first-of-type > li"
);
let navContainer = $("nav.nav-primary");

$(window).resize(function() {
  if ($(window).width() >= 768) {
    //TOGGLING SUBMENU NAVIGATION
    subMenuInnerLink.hover(
      function() {
        $("ul", this)
          .stop()
          .slideDown(200);
        if (
          $(this)
            .children("ul")
            .offset().left +
            200 >
          $(window).width()
        ) {
          $(this)
            .children("ul")({ right: "180px" })
            .animate({ right: "0px" }, "slow");
        }
      },
      function() {
        $("ul", this)
          .stop()
          .slideUp(200);
      }
    );
  } else {
    subMenuInnerLink.unbind("mouseenter mouseleave");
    subMenuInnerLink.on("click", function(e) {
      e.preventDefault();
    });
  }
});

if (getWindowWidth() >= 768) {
  //TOGGLING SUBMENU NAVIGATION
  topLevelElement.each(function() {
    $(this).hover(
      function() {
        $(this)
          .children(".sub-menu")
          .stop()
          .slideDown(200);
      },
      function() {
        $(this)
          .children(".sub-menu")
          .stop()
          .slideUp(200);
      }
    );
  });

  subMenuInnerLink.hover(
    function() {
      $("ul", this)
        .stop()
        .slideDown(200);
    },
    function() {
      $("ul", this)
        .stop()
        .slideUp(200);
    }
  );
} else {
  subMenuInnerLink.unbind("mouseenter mouseleave");
  subMenuInnerLink.on("click", function(e) {
    e.preventDefault();
  });
}

function getWindowWidth() {
  var windowWidth = 0;
  if (typeof window.innerWidth == "number") {
    windowWidth = window.innerWidth;
  } else {
    if (document.documentElement && document.documentElement.clientWidth) {
      windowWidth = document.documentElement.clientWidth;
    } else {
      if (document.body && document.body.clientWidth) {
        windowWidth = document.body.clientWidth;
      }
    }
  }
  return windowWidth;
}

Answer 1

问题是默认情况下您的三级菜单并未隐藏。您在 CodePen 示例中提供的样式确实隐藏了二级菜单，但是，第 62 行明确允许它们可见:

.sub-menu {
    display: block;
}

如果我们更改 display: none，我们将得到所需的结果。

这是一个updated sample在 CodePen 上。

最后一件事 - 我注意到代码中的运行时错误有时会在计算左偏移量并向其添加 200 时发生(第 19 行)。您可能想在生产部署之前修复该问题。