英文:
dropdown menu doesn't close when I click it again at menu mobile responsive user
问题
我正在处理一个包含响应式下拉菜单的网站导航栏的问题。然而，我遇到了一个问题，即当我在菜单外部单击时，下拉菜单不会关闭。我尝试将data-bs-auto-close="outside"属性添加到下拉切换元素，但似乎没有起作用。
以下是相关的代码片段：
<nav class="navbar navbar-expand-lg bg-dark navbar-dark shadow-sm px-1 py-lg-0 px-lg-0 darkBrownBg">
<!-- 省略了导航栏代码以缩减内容 -->
<div class="navbar-collapse collapse show" id="navbarCollapse" style="">
<div class="container-fluid gx-0">
<div class="row gx-0 px-lg-2 py-lg-1">
<div class="col-lg-1 d-flex align-items-center order-lg-1 order-2">
<!-- 为了简洁起见，省略了社交媒体图标 -->
</div>
<div class="col-lg-11 order-lg-2 order-1 px-2 float-right mb-md-0 mb-1">
<div class="navbar-nav gap-0 navlinks mt-lg-0 mt-4 nav justify-content-end">
<!-- 为了简洁起见，省略了其他导航链接 -->
<a href="#" class="nav-link dropdown-toggle dropdownMenu" id="dropdownMenu" data-bs-auto-close="outside" role="button" data-bs-toggle="dropdown" aria-expanded="false">菜单</a>
<div class="dropdown-menu mega-menu" aria-labelledby="dropdownMenu">
<!-- 省略了下拉菜单内容 -->
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
在移动用户菜单上再次单击时，下拉菜单不会关闭。
英文:
I'm working on a website navigation bar that includes a dropdown menu in responsive. However, I'm facing an issue where the dropdown menu doesn't close when I click outside of it. I've tried adding the data-bs-auto-close="outside" attribute to the dropdown toggle element, but it doesn't seem to be working.
Here's the relevant code snippet:
<!-- Navbar code omitted for brevity -->
<div class="navbar-collapse collapse show" id="navbarCollapse" style="">
<div class="container-fluid gx-0">
<div class="row gx-0 px-lg-2 py-lg-1">
<div class="col-lg-1 d-flex align-items-center order-lg-1 order-2">
<!-- Social media icons omitted for brevity -->
</div>
<div class="col-lg-11 order-lg-2 order-1 px-2 float-right mb-md-0 mb-1">
<div class="navbar-nav gap-0 navlinks mt-lg-0 mt-4 nav justify-content-end">
<!-- Other navigation links omitted for brevity -->
<a href="#" class="nav-link dropdown-toggle dropdownMenu" id="dropdownMenu" data-bs-auto-close="outside" role="button" data-bs-toggle="dropdown" aria-expanded="false">Menu</a>
<div class="dropdown-menu mega-menu" aria-labelledby="dropdownMenu">
<!-- Dropdown menu content omitted for brevity -->
</div>
</div>
</div>
</div>
</div>
</div>
</nav>```
<script src="<?=base_url()?>/<?=$publicimagepath?>frontdesign/js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
dropdown menu doesn't close when I click it again at menu mobile user
I'm working on a website navigation bar that includes a dropdown menu in responsive. However, I'm facing an issue where the dropdown menu doesn't close when I click outside of it. I've tried adding the data-bs-auto-close="outside" attribute to the dropdown toggle element, but it doesn't seem to be working.
</details>
# 答案1
**得分**: 1
以下是您要翻译的内容：
只需添加一些JavaScript代码来解决这个问题。
```html
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Bar</title>
<!-- CSS dependencies -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<style>
.mega-menu {
/* Add your styles for the dropdown menu */
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-collapse collapse show" id="navbarCollapse" style="">
<div class="container-fluid gx-0">
<div class="row gx-0 px-lg-2 py-lg-1">
<div class="col-lg-1 d-flex align-items-center order-lg-1 order-2">
<!-- Social media icons omitted for brevity -->
</div>
<div class="col-lg-11 order-lg-2 order-1 px-2 float-right mb-md-0 mb-1">
<div class="navbar-nav gap-0 navlinks mt-lg-0 mt-4 nav justify-content-end">
<!-- Other navigation links omitted for brevity -->
<a href="#" class="nav-link dropdown-toggle dropdownMenu" id="dropdownMenu" data-bs-auto-close="outside" role="button" data-bs-toggle="dropdown" aria-expanded="false">Menu</a>
<div class="dropdown-menu mega-menu" aria-labelledby="dropdownMenu">
<a>test</a>
<!-- Dropdown menu content omitted for brevity -->
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- JavaScript dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<!-- JavaScript code for drobDown menu -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var dropdownElement = document.getElementById('dropdownMenu');
var dropdown = new bootstrap.Dropdown(dropdownElement, {
autoClose: 'outside'
});
});
</script>
</body>
</html>
<!-- end snippet -->
英文:
You Just need to add some JavaScript Code to solve this problem
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Bar</title>
<!-- CSS dependencies -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<style>
.mega-menu {
/* Add your styles for the dropdown menu */
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-collapse collapse show" id="navbarCollapse" style="">
<div class="container-fluid gx-0">
<div class="row gx-0 px-lg-2 py-lg-1">
<div class="col-lg-1 d-flex align-items-center order-lg-1 order-2">
<!-- Social media icons omitted for brevity -->
</div>
<div class="col-lg-11 order-lg-2 order-1 px-2 float-right mb-md-0 mb-1">
<div class="navbar-nav gap-0 navlinks mt-lg-0 mt-4 nav justify-content-end">
<!-- Other navigation links omitted for brevity -->
<a href="#" class="nav-link dropdown-toggle dropdownMenu" id="dropdownMenu" data-bs-auto-close="outside" role="button" data-bs-toggle="dropdown" aria-expanded="false">Menu</a>
<div class="dropdown-menu mega-menu" aria-labelledby="dropdownMenu">
<a>test</t>
<!-- Dropdown menu content omitted for brevity -->
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- JavaScript dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<!-- JavaScript code for drobDown menu -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var dropdownElement = document.getElementById('dropdownMenu');
var dropdown = new bootstrap.Dropdown(dropdownElement, {
autoClose: 'outside'
});
});
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论