jQuery 悬停/单击桌面和移动设备答案

【问题标题】：jQuery hover/click on desktop and mobile devicesjQuery 悬停/单击桌面和移动设备
【发布时间】：2016-02-25 16:48:31
【问题描述】：

我有一个包含两个类别的菜单：天气和雪。一个可见的图标和隐藏的弹出菜单。悬停或单击第一个 div 的图标后，它会显示第二个 div 弹出窗口。悬停在桌面设备上做出反应，在移动设备上点击它。

这是我的 jQuery 代码的一部分：

    if ($(window).width() > 1025) {
        $('.weather').hover(function(){
            $('.weather-popup').addClass('side-open');
        },function(){
            $('.weather-popup').removeClass('side-open');
        });         

        $('.snow').hover(function(){
            $('.snow-popup').addClass('side-open');
        },function(){
            $('.snow-popup').removeClass('side-open');
        }); 
    }


    if ($(window).width() < 1025) {         
        $('.weather').click(function(){
            $('.weather-popup').toggleClass('side-open');
        }); 
        $('.snow').click(function(){
            $('.snow-popup').toggleClass('side-open');
        });         
    }

第一部分适用于桌面设备，效果很好，但我对第二部分有问题 - 移动设备。

在 iPad 上，当我触摸天气图标时，它会显示弹出部分，再次触摸天气图标后，弹出部分会隐藏。没关系，但是如果我触摸天气图标，然后触摸第二个菜单图标，在本例中为“雪”，它会显示雪弹出窗口，并且天气 div 的弹出部分保持打开状态。

我希望在触摸第二个类别时自动隐藏第一个类别。

同样，当触摸空白区域时，div 应该会自动隐藏。

请问，我怎样才能做到这一点？

【问题讨论】：

标签： jquery hover click toggle

【解决方案1】：

我希望在触摸第二个类别时自动隐藏第一个类别。

您可以通过检查另一个弹出窗口是否具有 side-open 类来管理它。

$('.weather').click(function(){
    if ($('.snow-popup').hasClass('side-open')){
        $('.snow-popup').removeClass('side-open');
    }
    $('.weather-popup').toggleClass('side-open');
}); 
$('.snow').click(function(){
    if ($('.weather-popup').hasClass('side-open')){
        $('.weather-popup').removeClass('side-open');
    }
    $('.snow-popup').toggleClass('side-open');
});

同样，当触摸空白区域时，div 应该会自动隐藏。

您可以通过为整个文档设置一个click 侦听器来实现这一点，在使用它的任何地方删除side-open 类（这会隐藏您的情况下的对话框吗？），并使用e.stopPropagation(); 停止点击从传播到html 级别，以便您可以打开对话框。

$('html').click(function() {
    $('.side-open').removeClass('side-open');
});

$('.weather').click(function(e){
    if ($('.snow-popup').hasClass('side-open')){
        $('.snow-popup').removeClass('side-open');
    }
    $('.weather-popup').toggleClass('side-open');
    e.stopPropagation();
}); 
$('.snow').click(function(e){
    if ($('.weather-popup').hasClass('side-open')){
        $('.weather-popup').removeClass('side-open');
    }
    $('.snow-popup').toggleClass('side-open');
    e.stopPropagation();
});

【讨论】：

巴斯，谢谢你的回答。第一部分工作正常（当我触摸第二部分时会自动隐藏。），但第二部分不起作用，问题出在：$('html').click(function() { $( '.side-open').removeClass('side-open'); });.我尝试使用 .weather-popup 或 #side-dock（这些元素的容器）更改 .side-open，但它仍然不起作用。我为第一个解决方案 +1。
什么不起作用？也许您的元素占据了整个页面？看看这个小提琴jsfiddle.net/ub8c6smh/8 看看它是如何为我工作的（点击绿色框）
如果你把它放在文件上呢？ $(document).click
我也尝试过，但这是同样的问题。你可以检查一下。我可能有一些冲突的脚本...
是的，但是将屏幕尺寸调整到1025px以下，刷新页面并尝试点击元素，你会看到问题。

【解决方案2】：

$('html').click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

这是一个很好的方法。如果用户点击窗口，隐藏菜单。如果用户单击您的菜单区域，请取消它。这应该适用于移动设备上的雪/天气窗口。这是一个链接：How to detect a click outside an element?。

【讨论】：