Блог

Я работаю над мобильным меню для веб-сайта, который я создал в WordPress Divi Theme. Когда пользователь веб-сайта нажимает на «hamburgericon», открывается полноэкранное меню:

мобильное меню

Когда вы нажимаете «Завершить», открывается подменю:

мобильное меню с подменю

Я бы хотел, чтобы подменю снова исчезло при повторном нажатии «termine». Но я, к сожалению, не знаю, как это сделать.

Вот код, с которым я работал:

 <li class="nav-link">
    <a href="#">Termine<i class="fas fa-caret-fown"></i></a>
        <div class="dropdown">
            <ul>
                <li class="dropdown_link">
                    <a href="#" onclick="closeNav()">Regelmäßige Termine</a>
                </li>
                <li class="dropdown_link">
                    <a href="#" onclick="closeNav()">Besondere Termine</a>
                </li>
                <li class="dropdown_link">
                    <a href="#" onclick="closeNav()">Freizeiten</a>
                </li>
            </ul>
        </div>
</li>
 

CSS для открытия подменю выглядит следующим образом:

 .nav-link:hover > .dropdown {
    display: block;
 }
 

Функция Java script для «closeNav ()» является:

 function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
 

Измените свой код на:

 function closeNav() {
    document.getElementById("mySidenav").style.display = "none";
}
 

Пожалуйста, обратите внимание на следующее:

• Если <a> элементы являются обычными HTML-ссылками (не генерируемыми каким-либо маршрутизатором javascript), когда пользователь нажимает на них, он просто переходит на другую страницу, поэтому меню закрывается в любом случае.
• Ваша страница выглядит так, как будто она предназначена для мобильного использования. На большинстве мобильных устройств hover это не сработает, так как нажатие на ссылку на самом деле является щелчком мыши.