jQuery hover/click 在桌面和移动设备上

Question

我有一个包含两类的菜单：天气和雪。一个可见的图标和隐藏的弹出菜单。悬停或单击第一个 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 当我触摸天气图标时，它显示弹出部分，再次触摸天气图标后，弹出部分隐藏。没关系，但是如果我触摸天气图标，然后触摸第二个菜单图标，在本例中 "Snow"，它会显示雪花弹出窗口，并且天气 div 的弹出窗口部分保持打开状态。

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

此外，当触摸空白 space 时，div 应该会自动隐藏。

请问，我该如何实现？

Answer 1

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

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

这是一个很好的方法。如果用户单击 window，则隐藏菜单。如果用户单击您的菜单区域，则取消该操作。这应该适用于移动设备上的 snow/weather windows。这是 link: How to detect a click outside an element? 。

Answer 2

I want the first category to be automatically hidden when I touch the second one.

您可以通过检查其他弹出窗口是否有 side-open class.

来管理它

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

Also when touching on empty space, div is supposed to hide automatically.

您可以通过为整个文档设置一个 click 侦听器，在任何使用它的地方删除 side-open class 来实现（这会隐藏您的对话框，对吗？），并使用 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();
});

jQuery hover/click 在桌面和移动设备上

jQuery hover/click on desktop and mobile devices

jquery

click

toggle

hover