I've created a navbar. On mobile view, I set a console.log for when I click the hamburger menu. It responds once. When I resize the window and click again, it responds several times. Again, and it responds 10+ times, etc. This breaks the navbar with how I have it set up. Below, I've tried including the general idea/logic behind what I believe is to be the issue and removing all of the styling functions and such. Does console.log fire more and more due to $(window).on("resize", handleResize);
? I tried adding $(window).off("resize", handleResize);
to no avail. How can I fix this?
$(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);
});
Have you considered simplifying your life and using CSS for this? https://codepen.io/panchroma/pen/XWZZozy
HTML
Add a viewport metatag in the head of your doc
<meta name="viewport" content="width=device-width, initial-scale=1">
And add a class to your mobile dropdown so you can target it with your 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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.