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

【问题标题】：Navigation submenus not displaying correctly for specific main nav link特定主导航链接的导航子菜单未正确显示
【发布时间】：2019-07-27 06:38:25
【问题描述】：

不完全确定发生了什么，但是对于我正在处理的这个 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;
}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

.sub-menu {
    display: block;
}

如果我们改变 display: none，我们会得到想要的结果。

这是 CodePen 上的updated sample。

最后一件事 - 我注意到代码中的运行时错误有时会在您计算左侧偏移量并将其添加 200 时发生（第 19 行）。您可能想在生产部署之前解决这个问题。

【讨论】：