时间戳

首页 > 解决方案 > 如何修复此下拉导航 javascript？

javascript - 如何修复此下拉导航 javascript？

问题描述

Hiere你可以访问我的网站

如果你这样做，你会看到主菜单。现在按 F12 并进入电话视图。如果您确实折叠我的网站，直到您在电话模式下看到导航栏。尝试单击具有子菜单的项目。如您所见，下拉按钮在电话模式下不起作用，但它们在普通 PC 模式下起作用。

我的javascript如下：

// search-box open close js code
let navbar = document.querySelector(".navbar");
// sidebar open close js code
let navLinks = document.querySelector(".nav-links");
let menuOpenBtn = document.querySelector(".navbar .bx-menu");
let menuCloseBtn = document.querySelector(".nav-links .bx-x");
menuOpenBtn.onclick = function() {
navLinks.style.left = "0";
}
menuCloseBtn.onclick = function() {
navLinks.style.left = "-100%";
}




let follow = document.querySelector(".follow");
follow.onclick = function () {
navLinks.classList.toggle("show8");
}
let chat = document.querySelector(".chat");
chat.onclick = function () {
navLinks.classList.toggle("show3");
}
let coding = document.querySelector(".coding");
coding.onclick = function () {
navLinks.classList.toggle("show4");
}
let lang = document.querySelector(".lang");
lang.onclick = function () {
navLinks.classList.toggle("show2");
}

我的html是follownig：

                        <div class="navbar">
                        <i class='bx bx-menu'></i>
                        <div class="nav-links">
                            <div class="sidebar-logo">
                                <i class='bx bx-x'> |☠ PRS ☠|</i>
                            </div>
                            <ul class="links">
                                <li>
                                    <a href="#">Follow us on</a>
                                    <i class='bx bxs-chevron-down follow arrow  '></i>
                                    <ul class="htmlCss-sub-menu sub-menu">
                                        <li><a href="https://www.twitch.tv/pirateradioshow98" target="_blank">☠| Twitch -PRS- |☠&lt;/a></li>
                                        <li><a href="https://www.twitch.tv/VieraGuti" target="_blank">☠| Twitch VieraGuti |☠&lt;/a></li>
                                        <li><a href="https://www.twitch.tv/legozgz" target="_blank">☠| Twitch -LEGO- |☠&lt;/a></li>
                                        <li><a href="https://www.twitch.tv/beyker1965" target="_blank">☠| Twitch -BEYKER- |☠&lt;/a></li>
                                        <li><a href="https://www.youtube.com/channel/UC6JWt6KSex34qH7rpokdTpg" target="_blank">☠| Youtube -BEYKER- |☠&lt;/a></li>
                                        <li><a href="https://www.facebook.com/Pirate-Radio-Show-103686634953174" target="_blank">☠| Facebook -PRS- |☠&lt;/a></li>
                                        <li><a href="https://twitter.com/show_pirate" target="_blank">☠| Twitter -PRS- |☠&lt;/a></li>
                                        <li><a href="https://www.instagram.com/pirateradioshow98/" target="_blank">☠| Instagram -PRS- |☠&lt;/a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">☠| Chat |☠&lt;/a>
                                    <i class='bx bxs-chevron-down chat arrow  '></i>
                                    <ul class="htmlCss-sub-menu sub-menu">
                                        <li><a href="https://s.team/chat/FVI1GpWg">☠| Steam |☠&lt;/a></li>
                                        <li><a href="https://discord.gg/3t82PbymUc">☠| Discord |☠&lt;/a></li>
                                        <li><a href="#">☠| Discord WOT SPAIN|☠&lt;/a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">☠| Coding |☠&lt;/a>
                                    <i class='bx bxs-chevron-down coding arrow  '></i>
                                    <ul class="htmlCss-sub-menu sub-menu">
                                        <li><a href="https://pirateradioshow.net/Learn_ENG">☠| Learn 2 Code |☠&lt;/a></li>
                                        <li><a href="https://pirateradioshow.net/Pentest_1_ENG">☠| HACKING & PENTESTING |☠&lt;/a></li>
                                        <li><a href="https://github.com/Oscuras98/" target="_blank">☠| GitHUB |☠&lt;/a></li>
                                        <li><a href="https://www.facebook.com/groups/765324447394866" target="_blank">☠| FB Dev Group |☠&lt;/a></li>
                                    </ul>
                                </li>
                                <li><a href="https://pirateradioshow.net/Free_GAMES_ENG">☠| Free Games 4 Everyone! |☠&lt;/a></li>
                                <li><a href="https://pirateradioshow.net/Donations_ENG">☠| Donations |☠&lt;/a></li>
                                <li>
                                    <a href="#">☠| Languages |☠&lt;/a>
                                    <i class='bx bxs-chevron-down lang arrow  '></i>
                                    <ul class="htmlCss-sub-menu sub-menu">
                                        <li><a href="https://pirateradioshow.net/inicio">☠| Español |☠&lt;/a></li>
                                        <li><a href="https://pirateradioshow.net/index">☠| Magyar |☠&lt;/a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>

我不想多谈这个问题，只是想办法解决这个问题，因为我已经花了 6 个小时试图自己找到解决方案

标签： javascripthtmljquerycss

解决方案

推荐阅读