NAVBAR无法按预期运行 - 可能是由于不正确的jQuery（窗口）。

Question

我创建了一个纳维尔。在移动视图上，当我单击汉堡菜单时，我设置了一个控制台。它响应一次。当我调整窗口大小并再次单击时，它会响应几次。再次，它响应了10次以上的响应。这使纳维栏的设置打破了。下面，我尝试包括我认为要成为问题并删除所有样式功能的一般思想/逻辑。 console.log是否由于$（window）.on（“ ressize”，handleresize）;而越来越多？我尝试添加$（window）.off（“ resize”，“ handleresize）;无用。我该如何解决？

$(document).ready(function () {

// ...

function isMobileSize() {
  if (window.innerWidth < 990) {
    return true;
  }
  return false;
};

function handleResize() {
  if (isMobileSize()) {
    // show mobile dropdown
  } else if (!isMobileSize()) {
    // don't show mobile dropdown
  }
};

handleResize();
$(window).on("resize", handleResize);
});

Answer 1

您是否考虑过简化生活并为此使用CSS？
https://codepen.io/panchroma/penchroma/pen/pen/pen/pen/xwzzozozozy

>

在文档的头部添加一个视口元素

<meta name="viewport" content="width=device-width, initial-scale=1">  

，并在移动下拉列表中添加一类，以便您可以使用CSS

<div class="mobile-dropdown">
  <ul>
    <li><a href="#">mobile link</a></li>
    <li><a href="#">mobile link</a></li>
    <li><a href="#">mobile link</a></li>
    <li><a href="#">mobile link</a></li>
  </ul>
</div>

css 对目标进行定位。

@media (min-width: 990px) {
  .mobile-dropdown {
    display: none;
  }
}