jquery - 导航悬停在桌面上，点击移动设备

Question

我有一个 JSFiddle here .

这是一个带有下拉菜单的引导导航。 我没有使用 Bootstrap 下拉菜单，而是使用我自己的下拉菜单。 下拉菜单需要在桌面上悬停时显示，在移动设备上单击时显示。

我有一个媒体查询，用于在桌面上悬停时显示下拉菜单。 我正在使用 Modernizr 添加移动尺寸的点击事件。 如果页面以该尺寸加载，则桌面和移动功能可以正常工作。如果页面以桌面尺寸加载，则悬停功能有效；如果页面以移动尺寸加载，则移动功能有效

如果我以桌面大小加载页面，然后将页面大小调整为移动大小，反之亦然，则导航不起作用。如果我以桌面大小加载，则悬停可以工作，但如果我然后将大小调整为移动大小，则单击不起作用工作正常。

在调整页面大小后，我真的不需要这个来工作，因为如果你在移动设备上，你就不会调整大小。谁能告诉我为什么会发生这种情况以及是否有解决方案？

$(function(){
    function doneResizing() {
        if(Modernizr.mq('screen and (max-width:767px)')) {
            $('.at-drop-down').on('click', function(e){
                e.preventDefault();
                $(this).next($('.sub-menu')).slideToggle();
            })
        }
    }
    var id;
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });
    doneResizing();
});

Answer 1

我认为问题是因为，当您调整大小时，doneResizing() 方法会被多次调用，并且它将多个单击事件处理程序附加到下拉列表。

你可以尝试这个:

$(function(){

    $('.at-drop-down').on('click', function(e){
        if(Modernizr.mq('screen and (max-width:767px)')) {
            e.preventDefault();
            $(this).next($('.sub-menu')).slideToggle();
        }
    })

});

无需调整大小事件，并且单击事件仅注册一次。

演示:https://jsfiddle.net/alan0xd7/cwwaqp5k/45/

更新:

悬停问题:在“移动模式”下，如果您单击某些内容，然后将大小调整为“完整模式”，悬停将停止工作。这是因为 slideToggle() 设置 CSS 样式来隐藏和显示元素。您可以执行以下操作来删除它们:

$(window).resize(function() {
    $('.sub-menu').attr("style", "");
});

演示:https://jsfiddle.net/alan0xd7/cwwaqp5k/46/