:hover в мобильных версиях

[Coby1987]

Доброго времени суток!

Сделал меню 2-х уровневое, подуровень через :hover у ul. На десктопе все ок, а вот на мобильной версии как реализовать чтобы подменю открывалось не через наведение а по клику? Так например в стандартном меню от bootstrap4 сделано. Подскажите?

[npofopr]

Сделать или отдельную кнопку, раскрывающая подменю.

Или иногда я использовал double tap
http://qaru.site/questions/412893/touch-device-single-and-double-tap-events-handler-jqueryjavascript
https://gist.github.com/attenzione/7098476

[Drevko]

Нужно написать функцию на javascript + jQuery на событие клика.

Вот пример твоего меню:

<style>
.ul_menu ul li ul {
  display: none;
}
</style>

<div class="ul_menu">
  <ul>
    <li><span>пункт 1</span>
      <ul>
        <li>пункт 1.1</li>
        <li>пункт 1.2</li>
        <li>пункт 1.3</li>
      </ul>
    </li>
    <li><span>пункт 2</span>
      <ul>
        <li>пункт 2.1</li>
        <li>пункт 2.2</li>
        <li>пункт 2.3</li>
      </ul>
    </li>
  </ul>
</div>

<script type="text/javascript">
$(".ul_menu li").click(function(){
	$(this).find("ul").fadeToggle();
});
</script>

При клике на пункт меню будут открываться подпункты. При повторном клике подпункты будут закрываться.

[npofopr]

20.04.2019 в 02:06, Drevko сказал:

При клике на пункт меню будут открываться подпункты. При повторном клике подпункты будут закрываться.

Это всё отлично, если у родительского пункта нет ссылки.

Ну и статья любопытная https://blog.usejournal.com/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c

[Switch74]

Вложу свой вклад, возможно кому-то подойдет такой вариант
https://jsfiddle.net/1xtea2L6/
Вроде как должно работать

[Drevko]

10 часов назад, npofopr сказал:

Это всё отлично, если у родительского пункта нет ссылки.

Ну и статья любопытная https://blog.usejournal.com/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c

Это да, но как не крути, два взаимоисключающих события на одно действие не поставишь. Я использую в таком случае, например, кнопку справа от названия пункта со значком "+". 

[Int]

Я обычно делаю, что если обнаружено touch-устройство (например по наличию window.ontouchstart или по media-запросу pointer: coarse), то перехватываю клики по меню и делаю им preventDefault.