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');
                    }
                });
            }
        });
    });

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

我在堆栈和其他网站上查看了很多解决方案。为了测试我使用平板电脑，当垂直加载网站的移动版本但水平加载桌面版本时。通过这种方式，我可以同时测试旋转设备的人员。

编辑：基于更多测试和console.log，当我将屏幕放大时，我的窗口宽度从690变为128.75。我没有最模糊的原因。该脚本基于childMenu var的$（this）.width（）。更新了原始代码。虽然

仍然无法工作

Answer 1

我注意到的第一件事是你没有初始运行你的脚本，如果初始窗口是＆lt; 720.此外，您还没有取消绑定点击事件。

这应该解决这个问题：

       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更有效地将其保留为附加，并且只对某些窗口大小执行操作。这两种方法都应该有效。

Answer 2

我发现你的方法存在两个问题：

您应检测设备是否支持触摸

您正在附加事件＆＃39;调整大小＆＃39;，这意味着每次调整大小时都会附加事件处理程序。

jQuery(document).ready(function($) {
    var isTouchDevice = 'ontouchstart' in document.documentElement;  
    $('.dropdown').click(function(e) {
        if(isTouchDevice){
            // do soemthing
        }
    });
});

更新：如果要测试窗口宽度

    jQuery(document).ready(function($) {
        var $window = $('window'); 
        $('.dropdown').click(function(e) {
            if($window.width() < 720){
                // do soemthing
            }
        });
    });

Answer 3

使用data-toggle="dropdown"进入上方的下拉菜单：

<a class="dropdown-toggle" data-toggle="dropdown" role="menu" aria-expanded="false" href="www.example.com">
  Parent
</a>
<ul class="dropdown-menu">
  <li>Child 1</li>                            
  <li>Child 2</li>          
  <li>Child 3</li>                            
</ul>

data-toggle="dropdown"将阻止在单击和触摸时重定向到URL。

使用ontouchstart来检测移动浏览器，然后仅在桌面上单击父项（不移动）时强制重定向到URL：

function is_touch_device() {
  return !!('ontouchstart' in window);
}
$(document).ready(function() {
    if(!is_touch_device()) {
        $('a.dropdown-toggle[data-toggle="dropdown"]').click(function (e) {
            window.location.href = $(this).attr('href');
        });
    }
});

如何点击移动设备上的下拉菜单并将鼠标悬停在桌面上

3 个答案: