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

【问题标题】：How to click to dropdown on mobile and hover on desktop如何在移动设备上单击下拉菜单并在桌面上悬停
【发布时间】：2017-08-02 02:28:12
【问题描述】：

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

我尝试了 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()。更新了原始代码。还是不行

【问题讨论】：

标签： jquery css

【解决方案1】：

我注意到的第一件事是您没有初始运行脚本，如果初始窗口

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

       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 更有效地将其保持连接并仅对某些窗口大小执行操作。这两种方法都应该有效。

【讨论】：

【解决方案2】：

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

您应该检测设备是否支持触摸而不是窗口大小

您在“调整大小”上附加事件，这意味着每次调整大小时都会附加事件处理程序。

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

【讨论】：

由于平板电脑/iPad 的屏幕较大，我无法使用触摸检测。它们是触摸的，但屏幕足够大，将应用 :hover css，因此菜单将显示悬停和触摸。此外，如果菜单不在触摸设备上但小到足以显示移动菜单，则子菜单不会显示我同意你的第二个因素，我只是不知道如何处理它。我无法让检测 css 更改方法起作用，否则我会这样做
然后，宁可触摸，在 'if' 条件下测试 $('window').width()

【解决方案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');
        });
    }
});

【讨论】：