导航栏无法按预期运行 -- 可能是由于不正确的 jQuery (window).on( "resize" ) 代码



我已经创建了一个导航栏。在移动视图中,当我单击汉堡包菜单时,我设置了一个console.log。它会响应一次。当我调整窗口大小并再次单击时,它会响应几次。再一次,它会响应10次以上,等等。这破坏了我设置的导航条。下面,我试着包括我认为是问题背后的一般想法/逻辑,并删除所有的样式函数等。控制台日志火灾越来越多,由于$(window).on("resize", 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);
});

你考虑过用CSS来简化你的生活吗?https://codepen.io/panchroma/pen/XWZZozy

在文档的头部添加一个viewport元标签

<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;
}
}

最新更新