Jquery show/hide not at all working on mobile devices

Question

Here is the link to my website. Website I have applied jquery for hide and show menu items in menu as u can see in website. 菜单中的隐藏和显示菜单项应用了jquery。 It is not at all working on mobile devices. By default the list items are hide using CSS. I think the event.preventDefault(); is not working fine as it is reloading the page. here is my

JS:

$("li.parent.dropdown-submenu.mega-group > a").on('click', function(event) {
    event.preventDefault();
    $(this).toggleClass('active');
    $('.dropdown-mega.level2').hide();
    if($(this).hasClass('active'))
        $(this).closest('.parent').find('.dropdown-mega.level2').show();
});

I think the event.preventDefault(); is not working fine as it is reloading the page.

Answer 1

Add this too event.stopImmediatePropagation(); before the event.preventDefault();

Answer 2

try adding return false; after event.preventDefault();

Answer 3

I believe you have to use some plugin to make it work in mobile device. You can try hammer.js to achieve this. This plugin provides many touch events.

http://hammerjs.github.io/

Answer 4

If someone has struggled with it as me, can be a browser cache . Try to clean it (or test in an incognito window).

Can be the case if you are developing that page and testing on the device at the same time. For some reason, seems the mobile browsers don't download javascript file for every refresh.

Hope that helps.