jQuery hover/click on desktop and mobile devices

jQuery hover/click on desktop and mobile devices

I have a menu with two categories: weather and snow. A visible icon and hidden popup menu. After hovering or clicking on the icon from the first div, it shows the second div popup. Hovering reacts on desktop devices, and click it's on mobile devices.

Here's a part of my jQuery code:

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

The first part acts on desktop devices and it's working great, but I have issue with the second part - the mobile devices.

With iPad when I touch the weather icon, it shows the popup part and after touching again on the weather icon, the popup part hides. That's OK, BUT if I touch the weather icon and after that touching on the second menu icon, in this case "Snow", it shows the snow popup and the popup part from the weather div remains open.

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

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

Please, how can I achieve this?