У меня есть слайд в меню с использованием vanilla javascript для использования на телефонах, но до сих пор все мои тесты привели к тому, что мобильные браузеры игнорировали первый ответкитель (попробовали оба touchstart и щелкнули как события). Начиная со второго крана, он прекрасно работает с каждым последующим нажатием.
Как открытие и закрытие меню является единственной функцией javascript на страницах, я не хочу загружать огромную библиотеку, я хочу сохранить ее простой и малой. Мой код ниже:
var b = document.getElementById('menubtn');
b.addEventListener('touchstart', function (e) {
var n = document.getElementById('nav');
var ns = n.style.left;
if (ns == "-600px") {
n.style.left = "0px";
} else {
n.style.left = "-600px";
}
e.preventDefault();
});
Любые способы легко устранить эту необходимость двойного щелчка в первый раз?
В отделе fwiw это отзывчивый дизайн с навигационным меню в столбце на больших экранах и слайдом на телефонах.
Изменить: разрешил проблему
Пройдя через комментарий Matt Styles, я попытался использовать classList.toggle
, и он решил проблему. Окончательная версия приведена ниже:
var b = document.getElementById('menubtn');
var n = document.getElementById('nav');
b.addEventListener('touchstart', function () {
n.classList.toggle('shwmenu');
setTimeout(function () {
b.classList.toggle('shwmenu');
}, 500);
});
Я добавил задержанный код menuttn для переключения значка между закрытыми и открытыми состояниями.