jquery - 如何在移动设备上单击下拉菜单并在桌面上悬停

Question

我的菜单系统现在将在移动和桌面(以及悬停)上点击时显示子菜单项。我试图仅在移动设备上进行点击。

我试过 window.resize()、addEventListener 和 window.width()，但都没有成功。我得到的最接近的是这个

jQuery(document).ready(function($) {
        $(window).resize(function() {
            if($(window).width() < '720') {
                $('.dropdown').click(function(e) {
                    var childMenu = e.currentTarget.children[1];
                    if($(childMenu).hasClass('visible')) {
                        $(childMenu).removeClass('visible');
                    }else{
                        $(childMenu).addClass('visible');
                    }
                });
            }
        });
    });

如果我以非移动宽度加载我的页面，它会按预期工作(显示悬停，但不在点击时显示)，然后调整到移动尺寸并在那里工作(在点击时显示)。当我将其展开时它停止工作(在悬停和点击时显示)然后缩小它不起作用(点击时不显示)然后在我调整屏幕时来回移动。

我已经在 stack 和其他网站上查看了许多解决方案。为了进行测试，我使用的是平板电脑，当垂直加载网站的移动版本时，当水平加载桌面版本时。这样我就可以涵盖这两个基础，同时还可以测试旋转设备的人。

编辑: 基于更多测试和 console.log，当我放大屏幕时，我的窗口宽度从 690 变为 128.75。我不知道为什么。该脚本基于 childMenu var 的 $(this).width() 。更新了原始代码。还是不行

Answer 1

我注意到的第一件事是，您没有初始运行脚本，如果初始窗口小于 720，这会导致两者切换。此外，您没有取消绑定(bind)点击事件。

这应该可以解决这个问题:

       function windowSizeCheck() {
            $('.dropdown').off('click.mobile'); // Prevent duplicate bindings
            if($(window).width() < '720') {
                $('.dropdown').on('click.mobile', function(e) {
                    var childMenu = e.currentTarget.children[1];
                    if($(childMenu).hasClass('visible')) {
                        $(childMenu).removeClass('visible');
                    }else{
                        $(childMenu).addClass('visible');
                    }
                });
             }
        }
jQuery(document).ready(function($) {
        windowSizeCheck();
        $(window).resize(windowSizeCheck);
});

注意:我的回答有助于根据窗口大小附加和分离处理程序 Ovais 的方法更有效地保留它附加并且只对某些窗口大小执行操作。这两种方法都应该有效。