Закрыть меню CSS выпадающее по щелчку на других сенсорных устройств

Question

Хотя этот вопрос был задан ранее, я не смог найти рабочее решение еще где-нибудь, так что здесь идет ...

У меня есть нормальный чистый Меню навигации CSS с подменю (с использованием: hover) на быстродействующем сайте. Все работает отлично, за исключением того, что на сенсорных устройствах, если вы открываете подменю и решаете не нажимать на ссылку, она не закрывается, даже если вы касаетесь другого места на странице.

Есть ли способ, чтобы подменю закрывалось по щелчку в другом месте для сенсорных устройств, но сохраняло функциональность зависания для пользователей настольных компьютеров?

Спасибо!

PS. Я очень новичок в JS и jQuery, поэтому ответы с примерами будут высоко оценены!

Answer 1

Если вы хотите использовать «щелкнуть в любом месте», чтобы закрыть меню, это не повлияет на функциональность «зависания», но эти два способа скрытия меню будут соревноваться. Это означает, что у вас есть одно дополнительное ограничение - «убедитесь, что это видно при обработке щелчка». Используйте:

if($('#hover_settings').is(":visible")){ 
       //do something 
} 

Давайте скажем, у вас есть «#button_settings» на главной форме и меню «#hover_settings», которые становятся видимыми или скрытыми. Вы нажимаете «#button_settings», чтобы скрыть и показать «#hover_settings», и он отлично работает, если вы не решите иметь такой же эффект, чтобы скрыть «#hover_settings» от щелчка в другом месте, но внутри «#hover_settings».

Первый - как скрыть '#hover_settings'?

 $(document).click(function() { 
      if($('#hover_settings').is(":visible")){ 
       $('#button_settings').click(); 
      } 
     }); 

Второй - #button_settings - как он должен работать?

 $('#button_settings').click(function(){ 
      var $hs = $('#hover_settings'); 
      if($hs.is(":visible")){     
       $hs.hide({effect: "slide", direction : 'up'}, 500); 
      }else{ 
       $hs.show({effect: "slide", direction : 'up'}, 500);     
      }; 
      return false; 
     }); 

Третье - ограничение - у вас есть меню, и вы можете ожидать два варианта поведения после щелчка на каждом элементе

а) выполнить действие и закрыть меню - вам не нужно ничего делать.

б) совершать действия и выхода из меню открытым - вы должны закончить эту функцию OnClick без распространения, чтобы сделать так попробовать:

return false; 

или

e.stopPropagation();