问题

我正在处理一个包含响应式下拉菜单的网站导航栏的问题。然而，我遇到了一个问题，即当我在菜单外部单击时，下拉菜单不会关闭。我尝试将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:

  &lt;!-- Navbar code omitted for brevity --&gt;

  &lt;div class=&quot;navbar-collapse collapse show&quot; id=&quot;navbarCollapse&quot; style=&quot;&quot;&gt;
    &lt;div class=&quot;container-fluid gx-0&quot;&gt;
      &lt;div class=&quot;row gx-0 px-lg-2 py-lg-1&quot;&gt;
        &lt;div class=&quot;col-lg-1 d-flex align-items-center order-lg-1 order-2&quot;&gt;
          &lt;!-- Social media icons omitted for brevity --&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-lg-11 order-lg-2 order-1 px-2 float-right mb-md-0 mb-1&quot;&gt;
          &lt;div class=&quot;navbar-nav gap-0 navlinks mt-lg-0 mt-4 nav justify-content-end&quot;&gt;
            &lt;!-- Other navigation links omitted for brevity --&gt;
            &lt;a href=&quot;#&quot; class=&quot;nav-link dropdown-toggle dropdownMenu&quot; id=&quot;dropdownMenu&quot; data-bs-auto-close=&quot;outside&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;Menu&lt;/a&gt;
            &lt;div class=&quot;dropdown-menu mega-menu&quot; aria-labelledby=&quot;dropdownMenu&quot;&gt;
              &lt;!-- Dropdown menu content omitted for brevity --&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;```

&lt;script src=&quot;&lt;?=base_url()?&gt;/&lt;?=$publicimagepath?&gt;frontdesign/js/jquery-3.4.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

dropdown menu doesn&#39;t close when I click it again at menu mobile user

I&#39;m working on a website navigation bar that includes a dropdown menu in responsive. However, I&#39;m facing an issue where the dropdown menu doesn&#39;t close when I click outside of it. I&#39;ve tried adding the data-bs-auto-close=&quot;outside&quot; attribute to the dropdown toggle element, but it doesn&#39;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

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;title&gt;Responsive Navigation Bar&lt;/title&gt;

  &lt;!-- CSS dependencies --&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot;&gt;
  &lt;style&gt;
    .mega-menu {
      /* Add your styles for the dropdown menu  */
    }
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
    &lt;div class=&quot;navbar-collapse collapse show&quot; id=&quot;navbarCollapse&quot; style=&quot;&quot;&gt;
      &lt;div class=&quot;container-fluid gx-0&quot;&gt;
        &lt;div class=&quot;row gx-0 px-lg-2 py-lg-1&quot;&gt;
          &lt;div class=&quot;col-lg-1 d-flex align-items-center order-lg-1 order-2&quot;&gt;
            &lt;!-- Social media icons omitted for brevity --&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-lg-11 order-lg-2 order-1 px-2 float-right mb-md-0 mb-1&quot;&gt;
            &lt;div class=&quot;navbar-nav gap-0 navlinks mt-lg-0 mt-4 nav justify-content-end&quot;&gt;
              &lt;!-- Other navigation links omitted for brevity --&gt;
              &lt;a href=&quot;#&quot; class=&quot;nav-link dropdown-toggle dropdownMenu&quot; id=&quot;dropdownMenu&quot; data-bs-auto-close=&quot;outside&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;Menu&lt;/a&gt;
              &lt;div class=&quot;dropdown-menu mega-menu&quot; aria-labelledby=&quot;dropdownMenu&quot;&gt;
&lt;a&gt;test&lt;/t&gt;
                &lt;!-- Dropdown menu content omitted for brevity --&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;

  &lt;!-- JavaScript dependencies --&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

  &lt;!-- JavaScript  code for drobDown menu --&gt;
  &lt;script&gt;
    document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
      var dropdownElement = document.getElementById(&#39;dropdownMenu&#39;);
      var dropdown = new bootstrap.Dropdown(dropdownElement, {
        autoClose: &#39;outside&#39;
      });
    });
  &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

下拉菜单在移动响应式用户界面上，当我再次单击它时不会关闭。

问题

h2 database console in html layout:fragment (Spring Boot + Java)

如何在Javascript中检测键序列

PrelineUI插件不起作用，导致一些使用JavaScript的组件无法正常工作。

“Z-index Problems and Buttons CSS” 翻译为 “Z-index 问题和按钮 CSS”。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论