Dropdown menu sometimes unresponsive

[0llieW]

I have this jQuery code for some dropdown menus:

   $(".drop-btn").click(function(e) {
                $(".drop-btn").not(this).siblings(".dropdown-content").addClass("max-height-zero");
                $(".drop-btn").not(this).closest("div").find(".chevron").removeClass("swivel");
                $(".drop-btn").not(this).removeClass("blue-background");
                $(this).siblings(".dropdown-content").toggleClass("max-height-zero");
                $(this).closest("div").find(".chevron").toggleClass("swivel");
                $(this).toggleClass("blue-background");
            });

On iphone the code works mostly but often stops working if i play around with it for a minute or so. I haven’t got a whole device lab to utilise so am unsure if the behaviour is the same on other devices.

I only want it to work on smaller screen sizes so i have wrapped it in a function and called it both on the initial page load and also when the window is resized:

function stuffToDoAtVariousSizes() {
            if (window.innerWidth < 1000) {
         ...the code...
}
}

$(document).ready(function() {
           stuffToDoAtVariousSizes();
        });

        var resizeTimer;
 $(window).on('resize', function(e) {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
     stuffToDoAtVariousSizes();
  }, 250);
});

[PaulOB]

We’f really need to see a link to the page so we can test and see if we get the same results as you,

@0llieW

I only want it to work on smaller screen sizes so i have wrapped it in a function and called it both on the initial page load and also when the window is resized:

This begs more questions than it asks though.

If you implement the menu when the screen is smaller than 1000 what happens when the screen gets resized back larger than 1000px (as in desktop or landscape on some tablets). Your routines will still be active and maybe conflict with the larger screen display? You’d need to check if the page was resized larger and remove the event listeners etc.

What about touch devices that are larger than 1000px (e.g. some tablets in landscape)? They will get nothing unless you have some other means of navigation? is it a separate navigation for mobile (small screen) only?

You would be better off using matchmedia which is like media queries in js and has good support these days.

The best approach is one that works for all and I find that if you have a drop down menu then simply making a click menu for everyone solves the problem rather than trying to cater for hover for desktop and click for touch devices.

[0llieW]

Here’s a link to my current test site
http://www.chamberlainmusic.com/temp/duet-testing/header.html#

[0llieW]

I’ll be honest and say I hadn’t considered the need to remove event listeners when people resize I am using display: none in my css at certain breakpoints anyway so i guess I don’t have to worry about those elements still having event listeners??
Anyways, my main problem is iphone, which can’t be resized

[PaulOB]

@0llieW

I’ll be honest and say I hadn’t considered the need to remove event listeners when people resize

As I mentioned the event listeners are still in place when you resize on the desktop and the menus open on click and get confused with the hover effect - very confusing indeed.

@0llieW

However, my main problem is iphone, which can’t be resized

I do see the problem in my iphone and the menus stop working when you have scrolled the page a little. If the page hasn’t scrolled then the menu works fine (or if the bottom toolbar is visible it seems to work).

I’ve tried adjusting a few things but it doesn’t seem to help. It’s likely something to do with your sticky script but I can’t pinpoint the problem. I’d need to make a reduced test case to see what the exact cause is and of course testing on the iphone is awkward as you have to connect via cable and use devtools on safari.

Maybe try fixing the menu in position at all times and see if the problem still occurs. There may be a problem with transforms creating a new stacking context and stopping the menu from being clicked. It’s really one of those cases where you need to build the menu in isolation so that you can check for triggers more easily.