jQuery triggers not working on mobile menu

  • Hi,

    I’m trying to use a jQuery function on the mobile menu but everything I try fails to work. I’ve done a test using a simple hover alert message. When in desktop mode and rolling over ‘Home’ the alert message displays. However, when I reduce the window down to mobile and rollover ‘Home’ the alert message fails to show. If I move the jQuery selector tag to say the Logo, burger menu or search icon it shows on both the desktop and mobile.

    For some reason anything inside the ‘mobile menu container’ is being ignored.

    Here is the jQuery snippet that i’ve added to my header.php file: 

         <script type="text/javascript">
                                jQuery(document).ready(function () {

                                    jQuery("#menu-item-14").hover(function () {
                                        alert('test');
                                    });

                                });
                            </script>

    I’m using WooCommerce and Divi.

    Thank you

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m not sure what you mean, you can’t hover on mobile can you?

    Thread Starter lnorton059

    (@lnorton059)

    Hi,

    No, sorry I should of explained. This was done just to test on desktop.

    The issue is you can’t apply anything to the mobile menu. Whether it be hover or click.

    Thanks ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you show us the code you’re using for click & put it on your website? Also can you tell us where the code appears on your site, whether through a file or in the <head> for example.

    Seeing the css declarations for the mobile menu would help as well. For example, I sometimes see issues like this being caused by z-index.

    Also, the hover event listener is still wonky on actual mobile devices. You can Google search that more to see how people are getting around the limitation. Not sure what you end goal is with hover.

    Thread Starter lnorton059

    (@lnorton059)

    Hey,

    Just to explain. I was trying to create a menu structure for wordpress mobile structure which involved toggling classes to hide or reveal the sub menu. In order to Toggle the classes I needed to use jQuery. My original script would not work but I found a script online that used a delay function. For some reason jQuery fails to trigger on the mobile menu unless you use the time delay. Here is the new script that seems to work:

    <script type=”text/javascript”>
    (function ($) {

    function setup_collapsible_submenus() {

    $(“.lm-mobile-menu-back”).click(function () {
    $(“.visible”).removeClass(“visible”)
    });

    var $menu = $(‘#mobile_menu’),
    top_level_link = ‘#mobile_menu > .menu-item-has-children > a’;

    $menu.find(‘a’).each(function () {
    $(this).off(‘click’);

    if ($(this).is(top_level_link)) {
    $(this).attr(‘href’, ‘#’);
    }

    if (!$(this).siblings(‘.sub-menu’).length) {
    $(this).on(‘click’, function (event) {
    $(this).parents(‘.mobile_nav’).trigger(‘click’);
    });
    } else {
    $(this).on(‘click’, function (event) {
    event.preventDefault();
    $(this).parent().toggleClass(‘visible’);
    });
    }
    });
    }

    $(window).load(function () {
    setTimeout(function () {
    setup_collapsible_submenus();
    }, 700);
    });

    })(jQuery);
    </script>

    Obviously this is now using a combination of Toggle or remove but I’m not great at Javascript. Is there a cleaner way to write this?

    Thank you

    the above script is the logic most jQuery menus do it. You can always find zillions of opinions of doing it “cleaner” but your script is a fairly standard way of doing it.

    The main main is that it doesn’t rely on the hover listener to do the heavy lifting. It uses the click listener. Mobile browsers translate taps to clicks well across the board.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘jQuery triggers not working on mobile menu’ is closed to new replies.

Tags