jQuery在桌面和移动设备上悬停/单击

我有两类菜单：天气和雪。一个可见的图标和隐藏的弹出菜单。悬停或单击第一个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');
        });         
    }   

if（$（窗口）.width（）>1025）{
$（'.weather'）。悬停（函数（）{
$（'weather popup'）.addClass（'side-open'）；
}，函数（）{
$（'weather popup'）.removeClass（'side-open'）；
});         
$（'.snow'）.hover（函数（）{
$（'.snow popup'）.addClass（'side-open'）；
}，函数（）{
$（'.snow popup'）.removeClass（'side-open'）；
}); 
}
如果（$（窗口）.width（）<1025）{
$（'.weather'）。单击（函数（）{
$（'weather popup'）.toggleClass（'side-open'）；
}); 
$（'.snow'）。单击（函数（）{
$（'.snow popup'）.toggleClass（'side-open'）；
});         
}   

第一部分作用于桌面设备，它工作得很好，但我对第二部分有意见——移动设备

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

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

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

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

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

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

这是一个好办法。如果用户单击窗口，则隐藏菜单。如果用户单击了您的菜单区域，则取消该操作。这应该适用于移动设备上的雪/天气窗口。这里有一个链接：

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

您可以通过检查另一个弹出窗口是否打开了

侧边

类来管理它

$('.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'）。单击（function（）{$（'side-open'）。removeClass（'side-open'）；}）；。我尝试用.weather弹出窗口或#side dock（这些元素的容器）更改.side-open，但仍然不起作用+第一个解决方案来自我。什么不起作用？也许你的元素占据了整个页面？看看这把小提琴，看看它是如何为我工作的（点击绿色框），如果你把它放在文件上<代码>$（文档）。单击我也尝试过，但问题是一样的。你可以查一下。我可能有一些冲突的脚本…是的，但是在1025px下调整屏幕大小，刷新页面并尝试单击元素，您将看到问题。