Почему не работает js в мобильной версии?

Question

[Greeg Zagrelov]

На десктопе работает по клику меню, а вот только убираю в мобилку - сразу перестаёт работать, даже не навешивается класс.

document.addEventListener("DOMContentLoaded",
    function() {
        document.getElementById('dropdown').onclick = function() {
            var el = document.getElementById('dropdownNav');
            el.style.display === 'none' ? el.style.display = 'block' : el.style.display = 'none';
        }
    });

a(href="index.html")
    img(src="../assets/img/logo.svg", alt="logo")
+menu_item('index.html', 'Главная', 'c1 ')
+menu_item('windowspvh.html', 'Окна ПВХ', 'c1 ')
//- +menu_item('/index.html#about', 'Услуги', 'c1 ')
li.dropdown#dropdown
    a(href="#d").c1.local.menuDropdavn Услуги
    ul.dropdown-nav#dropdownNav
        li
            a(href="windowspvh.html") Окна ПВХ
        li
            a(href="glazing.html") Остекление балконов
        li
            a(href="calc.html") Отделка балконов 
        li
            a(href="arbor.html") Остекление беседок и террас
        li
            a(href="furnishings.html") Мебель для балконов
+menu_item('#act', 'Акции', 'c1 ')
//- +menu_item('#team', 'Наши специалисты', 'c1 local')
+menu_item('/index.html#reviews', 'Отзывы', 'c1 ')
+menu_item('#contacts', 'Контакты', 'c1 local')
a(href="##")
    img(src="../assets/img/inst.svg", alt="inst")
+mainButtonHed('Заказать звонок', 'Записаться на прием')

#dropdownNav
    display: none

Comments

[Антон Литвиненко]

В очередной раз убеждаюсь, что jade/pug это не моё. В этой каше черт ногу сломит

[Greeg Zagrelov]

Антон Литвиненко, Та не всё просто на самом деле =) очень даже советую без него уже не могу )

[Антон Литвиненко]

Greeg Zagrelov, вкусовщина, конечно, но я люблю закрывающие теги и не люблю вложенность на табах. Туда же sass в синтаксисе sass

Answer 1

[Dennis]

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

document.addEventListener("DOMContentLoaded", () => {
        const menu = document.getElementById('dropdown')
        menu.addEventListener('click', () => {
            const el = document.getElementById('dropdownNav');
            el.style.display === 'none' ? el.style.display = 'block' : el.style.display = 'none';
        })
});

Answer 2

[Евгений Запунный]

А если отладку на телефоне провести?

Comments

[Greeg Zagrelov]

Делал , заливал на хост ! открывал инкогнито .

[Rerurk]

Мобильный iPhone браузер Яндекс?

[Greeg Zagrelov]

Rerurk, нет Google Chrome android и на компе в браузере не работает если свернуть до мобилы

[Rerurk]

Greeg Zagrelov, местами в мобильных не работает onclick, незнаю с чем это связанно. Меняйте на ontouchend

[Rerurk]

Greeg Zagrelov, или перепишите подписку на событие через стрелочную функцию, к onmousedown

[Greeg Zagrelov]

Rerurk, я даже на jquery написал всё ровно не работает, вот же напасть )

[Kovalsky]

Greeg Zagrelov, покажите финальный код

[Greeg Zagrelov]

Kovalsky,

$("#dropdown").on("click touchstart", function() {
    $("#dropdownNav").slideToggle("slow");
    return false;
});

[Kovalsky]

Greeg Zagrelov, и где конкретно это не работает? Ставлю зуб что это связано либо с проблемой верстки либо со структурой документа, это должно везде работать. Сделайте интерактивный пример на jsfiddle/codepen, скажите на каких устройствах и в каких браузерах не работает