简体   繁体   中英

Navbar not functioning as intended -- May be due to incorrect jQuery (window).on("resize") code

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM