I can not understand what the problem with the work of the code. Everything works fine, until I change the resolution to the iPad (basically any tablet), that is, I don’t twist the screen.

$(window).resize(function(){ if(window.matchMedia && window.matchMedia("(min-width:320px) and (max-width:978px)").matches) { $(".navItem a").click(function(){ $("#nav1").slideUp(); }); } });

It turns out that the code is perfectly processed, if I hold the tablet vertically, it goes into the IF block in the console, it displays the resolution, it gets it perfectly, but if I turn the tablet in a horizontal orientation, we get 1024px resolution, and the code is still processed. This hides the navigation block to me, and I can no longer click on the menu buttons.

Briefly about the essence of the code. I have a menu of the site, which for computers is horizontal at the top, and for mobiles it is hidden behind the "hamburger" icon. Clicking on it vertically crawls down. I have a one-page website concept, so the links are anchor, and there is no website refresh. There is a smooth scroll to the anchor, but it is closed all over this pop-up menu. That is why it should be hidden after clicking on the link. This code that hides below, but for some reason it works even when it should not work. After all, if you run it right away on your computer, it will not start up in the IF block. If you run it from the horizontal mode of the tablet, too, everything is ok, if you turn it into portrait, everything also works with a bang, he sees a decrease in resolution and enters the IF block. But back after the horizontal in portraiture begins to suffer. It stops processing IF, but it just always works, although the condition does not fit.

    1 answer 1

    Welcome to StackOverflow.

    You assign a click handler inside the resize handler. As soon as your if executed more than once, click will call all the added functions - as many times as they were added. And, well, when if not executed, an already added handler (or handlers) click will still fire.

     $(window).resize(function(){ $(".navItem a").off("click"); if( ... ) { $(".navItem a").click(function(){ $("#nav1").slideUp(); }); } });

    Here's another such thought, maybe it will suit you. Wouldn't it be better to deploy the logic:

     $(".navItem a").click(function(){ if(window.matchMedia && window.matchMedia("(min-width:320px) and (max-width:978px)").matches) { $("#nav1").slideUp(); } });

    Then the resize handler is not needed at all.

    • I am immensely grateful to you! You are just my savior. For 4 hours I have been suffering with this problem. Added on your advice $ (". NavItem a"). Off ("click"); And yes, indeed, it is necessary to take it off until if - Vladimir Tytykalo
    • @ Vladimir Tytykalo - happy to help. To the left of the answer is a check mark - it makes sense to click on it if the answer contains the solution to your problem. - Igor
    • Yes of course. The issue is more than just resolved. But also very competently, without messages for refresher courses. - Vladimir Tytykalo
    • No, do not get it. I originally had it in IF. If without RESIZE, then it will not catch the turn of the tablet (phone). My horizontal menu just works on a rotated tablet. And if you click on any link of the horizontal menu, it will disappear))) And there will be no more clicking on anything, because the "hamburger" is available only for a screen smaller than 978px, and this is a tablet portrait mode - Vladimir Tytykalo