自定义菜单在移动滚动上折叠

Question

我已阅读与我的问题相关的类似问题，但没有找到解决方案。我正在为我的一个新客户制作另一个开发人员创建的菜单。客户不希望使用 jQuery，我相信这会解决我的问题，所以我希望找到对我的 jQuery 的调整来修复这个错误。我有一个 2 级菜单，在移动设备上，菜单在滚动时折叠。我不知道如何防止这种情况发生，因为当我在我的 PC 上测试时，即使在相同的宽度下也不会发生这种情况。使用的 jQuery 是在 .mouseenter 和 .mouseleave 事件上触发的，所以我相信它可能与此有关。任何人都知道如何防止菜单在没有插件的情况下在移动滚动时折叠？

下面是使用的jQuery：

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>

Answer 1

如果我正确理解您的问题，.mouseenter 肯定会导致此问题，因为移动设备上的触摸/拖动也被识别为网站中的鼠标事件。 我看到您尝试通过检查窗口宽度来过滤移动设备。在具有更大分辨率的平板电脑或手机上可能是错误的。 也许您可以尝试在鼠标事件中使用此方法： What is the best way to detect a mobile device in jQuery?