Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2018, 00:37
Интересующийся
Отправить личное сообщение для AndriiS Посмотреть профиль Найти все сообщения от AndriiS
 
Регистрация: 05.09.2018
Сообщений: 22

Меню 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();
});
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2018, 01:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,039

Сообщение от AndriiS
на что обратить внимание,
Сообщение от AndriiS
click
https://developer.mozilla.org/ru/doc...I/Touch_events
Ответить с цитированием
  #3 (permalink)  
Старый 06.10.2018, 09:29
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,386

AndriiS,
В каком браузере не работает?
мобильные хром, фф, опера, сафари клик нормально обрабатывают
Ответить с цитированием
  #4 (permalink)  
Старый 07.10.2018, 16:50
Интересующийся
Отправить личное сообщение для AndriiS Посмотреть профиль Найти все сообщения от AndriiS
 
Регистрация: 05.09.2018
Сообщений: 22

Сообщение от j0hnik Посмотреть сообщение
AndriiS,
В каком браузере не работает?
мобильные хром, фф, опера, сафари клик нормально обрабатывают
Chrom мобильный на андроид. Я пытаюсь по ссылке выше от Рони разобраться с событиями на таче, но не понимаю пока.

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

Последний раз редактировалось AndriiS, 07.10.2018 в 17:27.
Ответить с цитированием
  #5 (permalink)  
Старый 07.10.2018, 17:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,039

AndriiS,
$("#toggle").on("click touchstart", function() {})
Ответить с цитированием
  #6 (permalink)  
Старый 07.10.2018, 17:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,039

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает скрол в мобильном меню Hengkod Элементы интерфейса 3 02.08.2018 18:14
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Выпадающее меню Jquery по .hover не работает на мобильном helgajijka jQuery 4 28.05.2015 10:51
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36