JQuery click event not working on links with # - need to show / hide submenus on mobile

Question

I have a left hand menu that has a flyout submenu on hover. On tablet / mobile I have the menu collapsing with a toggle button. This all works fine.

The problem is the click event does not work on the menu items that have a submenu. I need to show / hide the submenus on click on mobile. So nothing happens when Item 1 is clicked but item 2 works and the submenu links work. Could it be the ones with links work and the ones with # don't?

   $(function() {
//behaviours depending on screensize
function checkScreenSize() {
  var width = $(window).width();

  /*MOBILE*/
  if (width < 991.98) {
    $('#primary-menu li').click(function() {
      console.log('test 1');
      $(this).children('.sub-menu').slideToggle();
    });
    //does not work

    $('#primary-menu > li').on('click', function() {
      console.log('test 2');
      $(this).children('.sub-menu').slideToggle();
    });
    //does not work

    //show submenu 
    $('#primary-menu  li').on('click', function() {
      console.log('test 3');
      var submenu = $(this).children('.sub-menu');
      $(submenu).show();

    });
    //does not work

    $('#primary-menu li > .sub-menu').parent().click(function() {
      console.log('test 4');
      var submenu = $(this).children('.sub-menu');
      var current = $(this).hasClass("current-menu-item");
      $(submenu).show();

    });
    //this works

  } else {
    /*DESKTOP*/
    // ....this all works....
  }


  checkScreenSize();
  $(window).resize(checkScreenSize);
});

.sub-menu {display:none}

user_463319 · Answer

Consider the following.

$(function() {
  function mobileInit() {
    $('li.menu-item').off("click").click(function(e) {
      if ($(this).parent("ul").is("#primary-menu")) {
        e.preventDefault();
        console.log("Click Event on Top Level");
        $(".sub-menu", this).toggle();
        return false;
      } else {
        console.log("Click Event on Sub Level");
        e.stopPropagation();
        return false;
      }
    });
  }

  function desktopInit() {}

  //behaviours depending on screensize
  function checkScreenSize() {
    if ($(window).width() < 991.98) {
      console.log("Mobile");
      mobileInit();
    } else {
      console.log("Desktop");
      desktopInit();
    }
  }

  checkScreenSize();
  $(window).resize(checkScreenSize);
});

.sub-menu {
  display: none
}

This assumes the User will click on all the menu-item elements and we want to do different things depending on their location in the hierarchy.

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent immediate propagation to other event-handlers. If you want to stop those, see stopImmediatePropagation().

Update

You had a Style, display: table on your element. Removing this allows CSS to Show and Hide it as needed. Switching to .toggle() will do this.

user_3544243 · Answer

Maybe you should try event delegation method, for example something like this;

$('#primary-menu).on('click', '.submenu > .menu-item', function (e) {
  // avoid the event to propagate and avoid running the other event listeners added to parent element(s)
  e.stopPropagation();
  // do the stuff you want to do with sub menus
  var submenu = $(this).children('.sub-menu');
  $(submenu).show();
})

$('#primary-menu).on('click', '.menu-item.menu-item-has-children', function (e) {
  // avoid the event to propagate and avoid running the other event listeners added to child element(s)
  e.stopPropagation();
  // do the stuff you want to do with menu items that has sub menus
  $(this).children('.sub-menu').slideToggle();
})

user_17043391 · Answer

Can't you just add two class to target directly your

(or work with your ids) ? I just add class menu-item-toggler to the first item and menu-item-redirect the the second one. Then I work with these classes.

I don't know if this is what you are looking for

$(function() {
  function mobileInit() {
    $('.menu-item-toggler').click(e => {
        e.preventDefault();
        console.log("Click Event on Top Level");
        $('.menu-item-toggler>.sub-menu').toggle();
        return false;
    })
    $('.menu-item-redirect').click(e => {
        console.log("Click Event on Sub Level");
        e.stopPropagation();
        return false;
    })
  };
  function desktopInit() {}

  //behaviours depending on screensize
  function checkScreenSize() {
    if ($(window).width() < 991.98) {
      console.log("Mobile");
      mobileInit();
    } else {
      console.log("Desktop");
      desktopInit();
    }
  }

  checkScreenSize();
  $(window).resize(checkScreenSize);
});

.sub-menu {
  display: none
}

*I worked with Twisty's code

JQuery click event not working on links with # - need to show / hide submenus on mobile

3 Answers