Custom Menu collapsing on mobile scroll

Question

I have read similar questions related to my issue, but have not come across a solution. I am working on a menu created by another developer for a new client of mine. The client does not wish to use a jQuery, which I believe would solve my issue, so I am hoping to find an adjustment to my jQuery to get this bug fixed. I have a 2-level menu, and on a mobile device, the menu collapses upon scrolling. I can not figure out how to prevent this from happening, as it does not occur when I test on my PC even at the same width. The jQuery used is triggered on .mouseenter and .mouseleave events, so I believe it might have something to do with that. Anyone have an idea as to how to prevent the menu from collapsing upon mobile scroll without a plugin?

Below is the jQuery used:

var $navItem = $("#main_nav").children("#nav").children("li").children("a");
var $subItems = $($navItem).siblings("ul");

$(function(){
    $($subItems).hide();

    var width = $(window).width(), height = $(window).height();
    if ((width <= 570)) 
    {
        $("#main_nav").children("#nav").hide();
    } 
    else 
    {
        $("#main_nav").children("#nav").show();
    }   
});

$(window).on('load resize', function(){ 
    var width = $(window).width(), height = $(window).height();
    if ((width <= 570)) 
    {
        $("#main_nav").children("#nav").hide();
    } 
    else 
    {
        $("#main_nav").children("#nav").show();
    }   
});

$($navItem).mouseenter(function(e){
    if ($(window).width() > 570) {
        //show submenu
        $(this).siblings("ul").show();
    }
});

$($navItem).mouseleave(function(){
    if ($(window).width() > 570) {
        //hide submenu
        $(this).siblings("ul").hide();
    }
});

$($subItems).mouseenter(function(){ 
    $(this).closest("ul").show();
    $(this).closest("ul").siblings("a").addClass("active");
});

$($subItems).mouseleave(function(){ 
    $(this).closest("ul").hide();
    $(this).closest("ul").siblings("a").removeClass("active");
});

$(".drop-down-arrow").click(function(e){
    e.preventDefault();
    $(this).toggleClass("flip");
    $(this).parent().siblings("ul").toggle();   
});

$(".drop-down-arrow").each(function(){
    if($(this).parent("a").siblings("ul").size() <= 0)
    {
        $(this).closest('.drop-down-arrow').css('display','none !important;');  
    }
});

HTML:

<ul id="nav" style="display: none;">
    <li><a href="#">Item 1<span class="drop-down-arrow"><img src="/media/199707/arrow-down.png" alt="drop down arrow"></span></a>
        <ul class="child" style="display: none;">
             <li><a href="#">Transmission Repair</a></li><li><a href="#">Brake Repair</a></li>
             <li><a href="#">Engine Repair</a></li><li><a href="#">Air Conditioning</a></li>                                      
             <li><a href="#">Auto Glass Repair</a></li><li><a href="#">Window Tinting</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a></li>
</ul>

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

If I understand your problem correctly, .mouseenter sure can cause this, because a touch/drag on mobile is also recognized as a mouse event in websites. I see you try to filter mobile devices with checking the window's width. It may be wrong on tablets or phones with bigger resolutions. Maybe you could try using this method in you mouse events: What is the best way to detect a mobile device in jQuery?

edited May 23 '17 at 11:58

Community

1
1

answered May 20 '15 at 07:29

Endanke

707
10
21

Thank you so much for pointing me in the direction I needed @Endanke. You were correct that the mouse events were the issue, and testing for mobile devices a better way solved my issue. For future readers, I used the chosen answer on the referenced link. – EricBellDesigns May 20 '15 at 16:46

Custom Menu collapsing on mobile scroll

1 Answers1