Javascript-форум - Меню toggle не срабатывает на мобильном

Javascript-форум (https://javascript.ru/forum/)

- Мобильный JavaScript (https://javascript.ru/forum/mobile/)

- - Меню toggle не срабатывает на мобильном (https://javascript.ru/forum/mobile/75406-menyu-toggle-ne-srabatyvaet-na-mobilnom.html)

Меню toggle не срабатывает на мобильном

Всем доброй ночи!

Я работаю над своим первым адаптивным сайтом. Решил делать Mobile-first. Сделал меню, которое разворачивается на десктопе, но в мобильном браузере отказывается работать.

Тема судя по информации в сети, не нова. Все то, что я нашел там, указывает на то, что ошибка в js.

Подскажите пожалуйста, на что обратить внимание, чтобы исправить. Я приведу только часть кода и разметки, так как всего много.

HTML часть:

<body>
<div id="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>

<div id="menu">
<ul>
<li>About WIOTTO</li>
<li>Destinations</li>
<li>Luxury hotels</li>
<li>Luxury villas</li>
<li>HM offers</li>
<li>Family offers</li>
<li>For business</li>
<li>Contacts</li>

</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/js.js"></script>
</body>

CSS часть:

body {
background: #45ad94;
}

#toggle {
width: 28px;
height: 30px;
margin: 10px auto;
}

#toggle div {
width: 100%;
height: 5px;
background: white;
margin: 4px auto;
transition: all 1s;
backface-visibility: hidden;
}

#toggle.on .one {
transform: rotate(45deg) translate(5px, 5px);
}

#toggle.on .two {
opacity: 0;
}

#toggle.on .three {
transform: rotate(-45deg) translate(7px, -8px);
}

#menu {
color: white;
border: 1px solid white;
width: 83.75%;
height: auto;
padding: 10px;
border-radius: 3px;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans",
"Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
line-height: 100px;
text-align: center;
margin: auto;
display: none;
}

ul {
line-height: 1.5rem;
text-align: left;
}

ul li {
list-style-type: none;
}

JS часть:

"use strict"

$("#toggle").click(function() {
$(this).toggleClass("on");
$("#menu").slideToggle();
});

Цитата:

Сообщение от AndriiS

на что обратить внимание,

Цитата:

Сообщение от AndriiS

click

https://developer.mozilla.org/ru/doc...I/Touch_events

AndriiS,
В каком браузере не работает?
мобильные хром, фф, опера, сафари клик нормально обрабатывают

Цитата:

Сообщение от j0hnik (Сообщение 495858)

AndriiS,
В каком браузере не работает?
мобильные хром, фф, опера, сафари клик нормально обрабатывают

Chrom мобильный на андроид. Я пытаюсь по ссылке выше от Рони разобраться с событиями на таче, но не понимаю пока.

Интересно то, что локально, через live server либо-же просто из папки, меню срабатывает. Обновляю на гите, открываю ссылку онлайн, - не срабатывает...
https://semenovgit.github.io/goit-fe...enu/index.html

AndriiS,

$("#toggle").on("click touchstart", function() {})

Цитата:

Сообщение от AndriiS

Обновляю на гите,

~~<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>~~
слишком старая версия и протокол!!!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>