jQuery slideUp not working on mobile devices

Question

I have a Wordpress site running Flatsome theme where there are some pages with sidebars created using Custom Sidebar plugin which are not showing up on a menu hover. I have try to fix that glitch using jQuery code below

<script>
jQuery(document).ready(function () {

    jQuery(".widget_nav_menu .menu-item-has-children").hover(
        function () {
            jQuery('ul.sub-menu', this).slideDown('medium');
        }, 

        function () {
                jQuery('ul.sub-menu', this).slideUp('medium');
        }
    );

});
</script>

which works fine on any computer browser but not on mobile devices (iPhone and iPad) and I have no clue what can cause that.

Mobile devices? like all of them? please specify as I know it works on some ;) — fred randall, Jun 23 '15 at 21:04

score 0 · Accepted Answer · edited May 23 '17 at 11:44

You can't hover on mobile.

jQuery(".widget_nav_menu .menu-item-has-children").hover( // change

Trigger above differently on Mobile, such as using double tap. hold

..or mousedown / mouse leave.

sample mobile friendly alteration: (untested but hopeflly you get the idea, it's not the .slideDown that is failing, it's the .hover)

jQuery(document).ready(function () {

    jQuery(".widget_nav_menu .menu-item-has-children").mouseout(function(){
        function () {
            jQuery('ul.sub-menu', this).slideDown('medium');
        }, 

        function () {
                jQuery('ul.sub-menu', this).slideUp('medium');
        }
    );

});

Your second part question may be -- how to maintain .hover trigger on desktop and trigger a mobile one as I'm suggesting on only mobile.

It looks like something wrong is there with a syntax (function after mouseout) — JackTheKnife, Jun 24 '15 at 20:25

jQuery slideUp not working on mobile devices

1 Answers1