我的导航栏中有一个下拉菜单。当我调整屏幕大小并使其变小时,会出现导航栏切换按钮,当我单击它时,导航栏菜单会在屏幕左侧打开。在这种情况下我无法打开下拉菜单,因为如果我单击任何软件,那么每当我单击下拉菜单打开它时,导航栏菜单就会自动关闭,菜单会自动关闭。我也附上图片。
这是代码
<nav>
<div class="nav-bar">
<i class='bx bx-menu sidebarOpen'></i>
<span class="logo navLogo"><a href="index.php"><img src="assets/img/ismailtvlogo.png" width="80"></a></span>
<div class="menu">
<div class="logo-toggle">
<span class="logo"><a href="index.php"><img src="assets/img/ismailtvlogo.png" width="80"></a></span>
<i class='bx bx-x siderbarClose'></i>
</div>
<ul class="nav-links">
<li><a href="index.php">Home</a></li>
<div class="dropdown ml-3 mr-2">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="#">Fact & Mystery</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Earning</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="#">Fashion & Style</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Health</a></li>
</ul>
</div>
</div>
</ul>
</div>
<li><a href="pages/about.php">About</a></li>
<li><a href="pages/privacy-policy.php">Privacy Policy</a></li>
<li><a href="pages/disclaimer.php">Disclaimer</a></li>
<li><a href="comment/index.php">Contact</a></li>
</ul>
</div>
<div class="darkLight-searchBox">
<div class="searchBox">
<div class="searchToggle">
<!-- <i class='bx bx-x cancel'></i>
<i class='bx bx-search search'></i> -->
</div>
<!-- <div class="search-field">
<input type="text" id="search" placeholder="Search...">
<i class='bx bx-search'></i>
</div> -->
</div>
</div>
</div>
</nav>
<script>
const body = document.querySelector("body"),
nav = document.querySelector("nav"),
modeToggle = document.querySelector(".dark-light"),
searchToggle = document.querySelector(".searchToggle"),
sidebarOpen = document.querySelector(".sidebarOpen"),
siderbarClose = document.querySelector(".siderbarClose");
let getMode = localStorage.getItem("mode");
if (getMode && getMode === "dark-mode") {
body.classList.add("dark");
}
// js code to toggle search box
searchToggle.addEventListener("click", () => {
searchToggle.classList.toggle("active");
});
// js code to toggle sidebar
sidebarOpen.addEventListener("click", () => {
nav.classList.add("active");
});
body.addEventListener("click", e => {
let clickedElm = e.target;
if (!clickedElm.classList.contains("sidebarOpen") && !clickedElm.classList.contains("menu")) {
nav.classList.remove("active");
}
});
</script>
我希望导航栏菜单不应该在点击屏幕上的任何软件时关闭,只要我点击关闭 (✖)