需要关闭所有已打开的下拉菜单，然后再打开另一个。

huangapple
go评论95阅读模式
英文:

In Nav need to close all other dropdowns which are open, while opening another

问题

I have multiple dropdowns within a top level dropdown menu. I have an issue where when I click to open one submenu, it remains open when I click to open another. Would like to auto close the others when another submenu is clicked open.

我的顶级下拉菜单中有多个下拉菜单项。当我点击打开一个子菜单时，另一个子菜单保持打开状态。希望在点击打开另一个子菜单时自动关闭其他子菜单。

Here is the translation for the provided HTML code:

这是提供的HTML代码的翻译：

  1. <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  2.   <div class="container-fluid"> <a class="navbar-brand" href="#"> LOGO </a>
  3.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
  4.     
  5.     <!-- start test -->
  6.     
  7.     <div class="row navbar-collapse" id="navbarCollapse">
  8.       <div class="col-md-12 order-last menu-one"> 
  9.         <!-- start -->
  10.         <ul class="navbar-nav ms-auto mb-2 mb-md-0 nav navbar-right justify-content-end">
  11.           <hr class="white d-block d-md-none">
  12.           <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">登录</a> </li>
  13.           <li class="nav-item"> <a class="nav-link" href="#">支持 <span class="text-ltred">1300 000 123</span></a> </li>
  14.           <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">全球站点</a>
  15.             <ul class="dropdown-menu dropdown-menu-end">
  16.               <li><a class="dropdown-item" href="#">美国/加拿大</a></li>
  17.               <li><a class="dropdown-item" href="#">新西兰</a></li>
  18.             </ul>
  19.           </li>
  20.           <li class="nav-item" id="search">
  21.             <div class="search-box nav-link">
  22.               <input type="text" class="search-input" placeholder="搜索">
  23.               <a class="search-btn" href="#"> ? </a> </div>
  24.           </li>
  25.         </ul>
  26.         <!-- end --> 
  27.       </div>
  28.       <div class="col-md-12 order-md-last menu-two"> 
  29.         <!-- start -->
  30.         <ul class="navbar-nav ms-auto mb-2 mb-md-0 nav navbar-right justify-content-end">
  31.           <li class="nav-item dropdown has-megamenu"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">解决方案和服务</a>
  32.             <div class="dropdown-menu megamenu" role="menu">
  33.               <div class="row g-3">
  34.                 <div class="col-md-6 col-12">
  35.                   <div class="col-megamenu">
  36.                     <h6 class="title">解决方案和服务</h6>
  37.                     <ul class="list-unstyled">
  38.                       <li class="dropend"> <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" data-bs-auto-close="true" aria-expanded="false">租赁解决方案</a>
  39.                         <ul class="dropdown-menu no-border">
  40.                           <li><a class="dropdown-item" href="">转移我的车队</a></li>
  41.                           <li><a class="dropdown-item" href="">开始新车队</a></li>
  42.                           <li><a class="dropdown-item" href="">电动车辆</a></li>
  43.                           <li><a class="dropdown-item" href="">下一次租赁</a></li>
  44.                           <li><a class="dropdown-item" href="">卡车、设备</a></li>
  45.                           <li><a class="dropdown-item" href="">二手车</a></li>
  46.                         </ul>
  47.                       </li>
  48.                       <li class="dropend"> <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" data-bs-auto-close="true" aria-expanded="false">车队管理服务</a>
  49.                         <ul class="dropdown-menu no-border">
  50.                           <li><a class="dropdown-item" href="">事故管理</a></li>
  51.                           <li><a class="dropdown-item" href="">采购和处置</a></li>
  52.                           <li><a class="dropdown-item" href="">驾驶员安全</a></li>
  53.                           <li><a class="dropdown-item" href="">车队卡</a></li>
  54.                           <li><a class="dropdown-item" href="">租车</a></li>
  55.                           <li><a class="dropdown-item" href="">违规管理</a></li>
  56.                           <li><a class="dropdown-item" href="">保险</a></li>
  57.                           <li><a class="dropdown-item" href="">维护</a></li>
  58.                           <li><a class="dropdown-item" href="">PoolCar共享平台</a></li>
  59.                           <li><a class="dropdown-item" href="">注册</a></li>
  60.                           <li><a class="dropdown-item" href="">道路救援</a></li>
  61.                           <li><a class="dropdown-item" href="">远程监控</a></li>
  62.                           <li><a class="dropdown-item" href="">收费管理</a></li>
  63.                         </ul>
  64.                       </li>
  65.                       <li class="dropend"> <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" data-bs-auto-close="true" aria-expanded="false">车队优化</a>
  66.                         <ul class="dropdown-menu no-border">
  67.                           <li><a class="dropdown-item" href="">企业融资</a></li>
  68.                           <li><a class="dropdown-item" href="">租赁</a></li>
  69.                           <li><a class="dropdown-item" href="">销售和租赁回购</a></li>
  70.                           <li><a class="dropdown-item" href="">战略咨询</a></li>
  71.                           <li><a class="dropdown-item" href="">技术集成</a></li>
  72.                         </ul>
  73.                       </li>
  74.                     </ul>
  75.                   </div>
  76.                   <!-- col-megamenu.// --> 
  77.                 </div>
  78.                 <!-- end col-3 --> 
  79.                 
  80.               </div>
  81.               <!-- end row --> 
  82.             </div>
  83.             <!-- dropdown-mega-menu.// --> 
  84.           </li>
  85.           <li class="nav-item"> <a class="nav-link" href="#">司机支
  87. <details>
  88. <summary>英文:</summary>
  90. I have multiple dropdowns within a top level dropdown menu. I have an issue where when I click to open one submenu, it remains open when I click to open another. Would like to auto close the others when another submenu is clicked open.
  93. MY HTML:

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid"> <a class="navbar-brand" href="#"> LOGO </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

  1. &lt;!-- start test --&gt;
  2. &lt;div class=&quot;row navbar-collapse&quot; id=&quot;navbarCollapse&quot;&gt;
  3. &lt;div class=&quot;col-md-12 order-last menu-one&quot;&gt; 
  4. &lt;!-- start--&gt;
  5. &lt;ul class=&quot;navbar-nav ms-auto mb-2 mb-md-0 nav navbar-right justify-content-end&quot;&gt;
  6. &lt;hr class=&quot;white d-block d-md-none&quot;&gt;
  7. &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;login &lt;/a&gt; &lt;/li&gt;
  8. &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;support &lt;span class=&quot;text-ltred&quot;&gt;1300 000 123&lt;/span&gt;&lt;/a&gt; &lt;/li&gt;
  9. &lt;li class=&quot;nav-item dropdown&quot;&gt; &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;  Global sites &lt;/a&gt;
  10. &lt;ul class=&quot;dropdown-menu dropdown-menu-end&quot;&gt;
  11. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;United States / Canada&lt;/a&gt;&lt;/li&gt;
  12. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;New Zealand&lt;/a&gt;&lt;/li&gt;
  13. &lt;/ul&gt;
  14. &lt;/li&gt;
  15. &lt;li class=&quot;nav-item&quot; id=&quot;search&quot;&gt;
  16. &lt;div class=&quot;search-box nav-link&quot;&gt;
  17. &lt;input type=&quot;text&quot; class=&quot;search-input&quot; placeholder=&quot;Search&quot;&gt;
  18. &lt;a class=&quot;search-btn&quot; href=&quot;#&quot;&gt; ? &lt;/a&gt; &lt;/div&gt;
  19. &lt;/li&gt;
  20. &lt;/ul&gt;
  21. &lt;!-- end --&gt; 
  22. &lt;/div&gt;
  23. &lt;div class=&quot;col-md-12 order-md-last menu-two&quot;&gt; 
  24. &lt;!-- start--&gt;
  25. &lt;ul class=&quot;navbar-nav ms-auto mb-2 mb-md-0 nav navbar-right justify-content-end&quot;&gt;
  26. &lt;li class=&quot;nav-item dropdown has-megamenu&quot;&gt; &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; data-bs-toggle=&quot;dropdown&quot;&gt;Solutions &amp;amp; services&lt;/a&gt;
  27. &lt;div class=&quot;dropdown-menu megamenu&quot; role=&quot;menu&quot;&gt;
  28. &lt;div class=&quot;row g-3&quot;&gt;
  29. &lt;div class=&quot;col-md-6 col-12&quot;&gt;
  30. &lt;div class=&quot;col-megamenu&quot;&gt;
  31. &lt;h6 class=&quot;title&quot;&gt;Solutions &amp;amp; services&lt;/h6&gt;
  32. &lt;ul class=&quot;list-unstyled&quot;&gt;
  33. &lt;li class=&quot;dropend&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;dropdown-item dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; data-bs-auto-close=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Leasing solutions&lt;/a&gt;
  34. &lt;ul class=&quot;dropdown-menu no-border&quot;&gt;
  35. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Transfer my fleet&lt;/a&gt;&lt;/li&gt;
  36. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Start a new fleet&lt;/a&gt;&lt;/li&gt;
  37. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Electric vehicles&lt;/a&gt;&lt;/li&gt;
  38. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Next lease&lt;/a&gt;&lt;/li&gt;
  39. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Trucks, plant &amp;amp; equipment&lt;/a&gt;&lt;/li&gt;
  40. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Used vehicles&lt;/a&gt;&lt;/li&gt;
  41. &lt;/ul&gt;
  42. &lt;/li&gt;
  43. &lt;li class=&quot;dropend&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;dropdown-item dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; data-bs-auto-close=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Fleet management services&lt;/a&gt;
  44. &lt;ul class=&quot;dropdown-menu no-border&quot;&gt;
  45. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Accident management&lt;/a&gt;&lt;/li&gt;
  46. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Acquisition and disposals&lt;/a&gt;&lt;/li&gt;
  47. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Driver safety&lt;/a&gt;&lt;/li&gt;
  48. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Fleet card&lt;/a&gt;&lt;/li&gt;
  49. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Hire vehicles&lt;/a&gt;&lt;/li&gt;
  50. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Infringement management&lt;/a&gt;&lt;/li&gt;
  51. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Insurance&lt;/a&gt;&lt;/li&gt;
  52. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Maintenance&lt;/a&gt;&lt;/li&gt;
  53. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; PoolCar sharing platform&lt;/a&gt;&lt;/li&gt;
  54. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Registration&lt;/a&gt;&lt;/li&gt;
  55. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Roadside assistance&lt;/a&gt;&lt;/li&gt;
  56. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Telematics&lt;/a&gt;&lt;/li&gt;
  57. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Toll management&lt;/a&gt;&lt;/li&gt;
  58. &lt;/ul&gt;
  59. &lt;/li&gt;
  60. &lt;li class=&quot;dropend&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;dropdown-item dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; data-bs-auto-close=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Fleet optimisation&lt;/a&gt;
  61. &lt;ul class=&quot;dropdown-menu no-border&quot;&gt;
  62. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Corporate financing&lt;/a&gt;&lt;/li&gt;
  63. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Leasing&lt;/a&gt;&lt;/li&gt;
  64. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Sales and lease back&lt;/a&gt;&lt;/li&gt;
  65. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Strategic consulting&lt;/a&gt;&lt;/li&gt;
  66. &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Technology integration&lt;/a&gt;&lt;/li&gt;
  67. &lt;/ul&gt;
  68. &lt;/li&gt;
  69. &lt;/ul&gt;
  70. &lt;/div&gt;
  71. &lt;!-- col-megamenu.// --&gt; 
  72. &lt;/div&gt;
  73. &lt;!-- end col-3 --&gt; 
  74. &lt;/div&gt;
  75. &lt;!-- end row --&gt; 
  76. &lt;/div&gt;
  77. &lt;!-- dropdown-mega-menu.// --&gt; 
  78. &lt;/li&gt;
  79. &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Driver Support&lt;/a&gt;&lt;/li&gt;
  80. &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  81. &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;News&lt;/a&gt;&lt;/li&gt;
  82. &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Resources&lt;/a&gt;&lt;/li&gt;
  83. &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;btn btn-bd-primary&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Contact us&lt;/a&gt;&lt;/li&gt;
  84. &lt;/ul&gt;
  85. &lt;!-- end --&gt; 
  86. &lt;/div&gt;
  87. &lt;/div&gt;
  88. &lt;!-- end test --&gt;

</div>
</nav>

  2. You can see the full code I have at:
  3. https://www.codeply.com/p/YfWQ2HX73q
  4. I am stuck, and really would like the help to get this menu working beautifully.
  5. </details>
  6. # 答案1
  7. **得分**: 0
  8. 使用 `for` 循环来遍历具有 `className=dropdown-menu` 的元素，并相应地更改它的 `className`。
  9. 例如：
  10. ```javascript
  11. Array.from(document.querySelectorAll(".dropdown-menu")).forEach((e) => {
  12. e.className == "hide"
  13. ? e.className == "show"
  14. : e.className == "hide";
  15. })
英文:

use for loop to iterate through the elements with className=dropdown-menu and change it className accordingly

eg:

  1.    Array.from(document.querySelectorAll(&quot;.dropdown-menu&quot;)).forEach((e)=&gt;{
  2. e.className==&quot;hide&quot;
  3. ?e.className==&quot;show&quot;
  4. :e.className==&quot;hide&quot;
  5. })

答案2

得分: 0

将所有子菜单放入列表中，然后添加点击监听器，当点击时，关闭列表中除被点击的之外的所有子菜单：

  1. const subMenus = [];
  3. document.querySelectorAll('.dropend .dropdown-toggle').forEach(function(menu, index) {
  4.     
  5.     subMenus.push(new bootstrap.Dropdown(menu));
  7.     menu.addEventListener('click', function(e) {
  9.         for (let i = 0; i < subMenus.length; i++) {
  10.             if (i !== index) subMenus[i].hide();
  11.         }
  13.     });
  15. });

工作示例：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  2. <!-- language: lang-js -->
  3. document.addEventListener("DOMContentLoaded", function() {
  5.     /////// Prevent closing from click inside dropdown
  6.     document.querySelectorAll('.dropdown-menu').forEach(function(element) {
  7.         element.addEventListener('click', function(e) {
  8.             e.stopPropagation();
  9.         });
  10.     })
  12.     const subMenus = [];
  14.     document.querySelectorAll('.dropend .dropdown-toggle').forEach(function(menu, index) {
  15.         
  16.         subMenus.push(new bootstrap.Dropdown(menu));
  18.         menu.addEventListener('click', function(e) {
  20.             for (let i = 0; i < subMenus.length; i++) {
  21.                 if (i !== index) subMenus[i].hide();
  22.             }
  24.         });
  26.     });
  28.     // make it as accordion for smaller screens
  29.     if (window.innerWidth < 992) {
  31.         // close all inner dropdowns when parent is closed
  32.         document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){
  33.             everydropdown.addEventListener('hidden.bs.dropdown', function () {
  34.                 // after dropdown is hidden, then find all submenus
  35.                 this.querySelectorAll('.submenu').forEach(function(everysubmenu){
  36.                     // hide every submenu as well
  37.                     everysubmenu.style.display = 'none';
  38.                 });
  39.             })
  40.         });
  41.         
  42.         document.querySelectorAll('.dropdown-menu a').forEach(function(element){
  43.             element.addEventListener('click', function (e) {
  45.                 let nextEl = this.nextElementSibling;
  46.                 if(nextEl && nextEl.classList.contains('submenu')) {	
  47.                     // prevent opening link if link needs to open dropdown
  48.                     e.preventDefault();
  49.                     console.log(nextEl);
  50.                     if(nextEl.style.display == 'block'){
  51.                         nextEl.style.display = 'none';
  52.                     } else {
  53.                         nextEl.style.display = 'block';
  54.                     }
  56.                 }
  57.             });
  58.         })
  59.     }
  60.     // end if innerWidth
  61.     
  62.     
  63. });
  1. <!-- language: lang-css -->
  2. html {
  3.     overflow-x: hidden;
  4. }
  6. body {
  7.     padding-right: 0 !important;
  8.     font-family: "Cera-PRO-Regular", Arial, sans-serif;
  9.     font-weight: 300 !important;
  10.     font-size: 1rem;
  11.     line-height: 1.6;
  12.     overflow-x: hidden;
  13.     margin-top: 70px;
  14. }
  16. .navbar-collapse.in {
  17.     max-height: 100%;
  18. }
  20. .no-border {
  21.     border: none;
  22. }
  24. .menu-two li a.nav-link {
  25.     color: white !important;
  26. }
  28. .navbar-collapse {
  29.     padding-top: 70px;
  30.     padding-left: 40px;
  31.     padding-right: 40px;
  32. }
  34. .dropdown-menu li a {
  35.     text-decoration: none;
  36.     padding-left: 15px;
  37.     font-weight: 400;
  38.     color: #000;
  39. }
  41. .dropdown-menu {
  42.     --bs-dropdown-padding-y: 0;
  43. }
  45. @media (min-width: 768px) {
  46.     body {
  47.         margin-top: 40px;
  48.     }
  49.     .navbar-collapse {
  50.         float: left;
  51.         width: 100%;
  52.         clear: both;
  53.     }
  54.     .navbar-inverse {
  55.         border-top: 50px solid pink;
  56.     }
  57. }
  59. .second-nav {
  60.     margin-top: 40px;
  61. }
  63. li#search.nav-item {
  64.     margin-left: 0;
  65. }
  67. .navbar {
  68.     height: auto;
  69. }
  71. div.search-box.nav-link {
  72.     margin-top: 30px;
  73. }
  75. nav ul,
  76. .dropdown-menu li a {
  77.     font-size: 0.875rem;
  78.     font-weight: 700;
  79.     padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  80.     display: block;
  81. }
  83. .text-red {
  84.     color: #D6001C;
  85. }
  87. .text-ltred {
  88.     color: #FF435C;
  89. }
  91. .text-white {
  92.     color: #fff;
  93. }
  95. .dropend .dropdown-menu[data-bs-popper] {
  96.     background-color: lightgrey;
  97. }
  99. @media (min-width: 576px) {
  100.     .navbar {
  101.         height: auto;
  102.     }
  103.     li#search.nav-item {
  104.         margin-left: 0;
  105.     }
  106.     div.search-box.nav-link {
  107.         margin-top: 30px;
  108.     }
  109.     .navbar-expand-md .navbar-nav .nav-link {
  110.         margin-right: 0.2rem;
  111.         margin-left: 0.2rem;
  112.         padding-right: 0;
  113.         padding-left: 0;
  114.     }
  115. }
  117. @media (min-width: 768px) {
  118.     .navbar {
  119.         height: 40px;
  120.     }
  121.     .navbar-brand img {
  122.        
  124. <details>
  125. <summary>英文:</summary>
  127. Get all submenus into a list, and then add click listener, and on click, close all submenus in the list, but the one that is clicked:
  129.      const subMenus = [];
  131.     document.querySelectorAll(&#39;.dropend .dropdown-toggle&#39;).forEach(function(menu, index) {
  132.         
  133.         subMenus.push(new bootstrap.Dropdown(menu));
  135.         menu.addEventListener(&#39;click&#39;, function(e) {
  137.             for (let i = 0; i &lt; subMenus.length; i++) {
  138.                 if (i !== index) subMenus[i].hide();
  139.             }
  141.         });
  143.     });
  146. working snippet:
  148. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  150. &lt;!-- language: lang-js --&gt;
  152.     document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
  155.         /////// Prevent closing from click inside dropdown
  156.         document.querySelectorAll(&#39;.dropdown-menu&#39;).forEach(function(element) {
  157.             element.addEventListener(&#39;click&#39;, function(e) {
  158.                 e.stopPropagation();
  159.             });
  160.         })
  163.         const subMenus = [];
  166.         document.querySelectorAll(&#39;.dropend .dropdown-toggle&#39;).forEach(function(menu, index) {
  167.             
  168.             subMenus.push(new bootstrap.Dropdown(menu));
  170.             menu.addEventListener(&#39;click&#39;, function(e) {
  172.                 for (let i = 0; i &lt; subMenus.length; i++) {
  173.                     if (i !== index) subMenus[i].hide();
  174.                 }
  176.             });
  178.         });
  182.     		// make it as accordion for smaller screens
  183.     		if (window.innerWidth &lt; 992) {
  185.     			// close all inner dropdowns when parent is closed
  186.     			document.querySelectorAll(&#39;.navbar .dropdown&#39;).forEach(function(everydropdown){
  187.     				everydropdown.addEventListener(&#39;hidden.bs.dropdown&#39;, function () {
  188.     					// after dropdown is hidden, then find all submenus
  189.     					  this.querySelectorAll(&#39;.submenu&#39;).forEach(function(everysubmenu){
  190.     					  	// hide every submenu as well
  191.     					  	everysubmenu.style.display = &#39;none&#39;;
  192.     					  });
  193.     				})
  194.     			});
  195.     			
  196.     			document.querySelectorAll(&#39;.dropdown-menu a&#39;).forEach(function(element){
  197.     				element.addEventListener(&#39;click&#39;, function (e) {
  198.     		
  199.     				  	let nextEl = this.nextElementSibling;
  200.     				  	if(nextEl &amp;&amp; nextEl.classList.contains(&#39;submenu&#39;)) {	
  201.     				  		// prevent opening link if link needs to open dropdown
  202.     				  		e.preventDefault();
  203.     				  		console.log(nextEl);
  204.     				  		if(nextEl.style.display == &#39;block&#39;){
  205.     				  			nextEl.style.display = &#39;none&#39;;
  206.     				  		} else {
  207.     				  			nextEl.style.display = &#39;block&#39;;
  208.     				  		}
  210.     				  	}
  211.     				});
  212.     			})
  213.     		}
  214.     		// end if innerWidth
  215.         
  216.         
  217.     });
  219. &lt;!-- language: lang-css --&gt;
  221.     html {
  222.         overflow-x: hidden;
  223.     }
  225.     body {
  226.         padding-right: 0 !important;
  227.         font-family: &quot;Cera-PRO-Regular&quot;, Arial, sans-serif;
  228.         font-weight: 300 !important;
  229.         font-size: 1rem;
  230.         line-height: 1.6;
  231.         overflow-x: hidden;
  232.         margin-top: 70px;
  233.     }
  235.     .navbar-collapse.in {
  236.         max-height: 100%;
  237.     }
  239.     .no-border {
  240.         border: none;
  241.     }
  243.     .menu-two li a.nav-link {
  244.         color: white !important;
  245.     }
  247.     .navbar-collapse {
  248.         padding-top: 70px;
  249.         padding-left: 40px;
  250.         padding-right: 40px;
  251.     }
  253.     .dropdown-menu li a {
  254.         text-decoration: none;
  255.         padding-left: 15px;
  256.         font-weight: 400;
  257.         color: #000;
  258.     }
  260.     .dropdown-menu {
  261.         --bs-dropdown-padding-y: 0;
  262.     }
  264.     @media (min-width: 768px) {
  265.         body {
  266.             margin-top: 40px;
  267.             /*130px;*/
  268.         }
  269.         .navbar-collapse {
  270.             float: left;
  271.             width: 100%;
  272.             clear: both;
  273.         }
  274.         .navbar-inverse {
  275.             border-top: 50px solid pink;
  276.         }
  277.         /*  .navbar-nav:nth-child(2) {
  278.         margin-top: 20px; 
  279.         clear: both;
  280.       }
  281.       .navbar-nav:nth-child(1) {
  282.         margin-top: -20px; 
  283.           clear: both;
  284.       } */
  285.     }
  287.     .second-nav {
  288.         margin-top: 40px;
  289.     }
  291.     li#search.nav-item {
  292.         margin-left: 0;
  293.     }
  295.     .navbar {
  296.         height: auto;
  297.     }
  299.     div.search-box.nav-link {
  300.         margin-top: 30px;
  301.     }
  303.     nav ul,
  304.     .dropdown-menu li a {
  305.         font-size: 0.875rem;
  306.         font-weight: 700;
  307.         padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  308.         display: block;
  309.     }
  311.     .text-red {
  312.         color: #D6001C;
  313.     }
  315.     .text-ltred {
  316.         color: #FF435C;
  317.     }
  319.     .text-white {
  320.         color: #fff;
  321.     }
  323.     .dropend .dropdown-menu[data-bs-popper] {
  324.         background-color: lightgrey;
  325.     }
  327.     @media (min-width: 576px) {
  328.         .navbar {
  329.             height: auto;
  330.         }
  331.         li#search.nav-item {
  332.             margin-left: 0;
  333.         }
  334.         div.search-box.nav-link {
  335.             margin-top: 30px;
  336.         }
  337.         .navbar-expand-md .navbar-nav .nav-link {
  338.             margin-right: 0.2rem;
  339.             margin-left: 0.2rem;
  340.             padding-right: 0;
  341.             padding-left: 0;
  342.         }
  343.     }
  345.     @media (min-width: 768px) {
  346.         .navbar {
  347.             height: 40px;
  348.         }
  349.         .navbar-brand img {
  350.             left: 50px;
  351.             top: 0;
  352.             width: 160px;
  353.         }
  354.         .menu-one {
  355.             margin-top: 50px;
  356.         }
  357.         .menu-two {
  358.             margin-top: 10px;
  359.         }
  360.         .menu-two li a.nav-link {
  361.             color: black !important;
  362.         }
  363.         .navbar-collapse {
  364.             padding-top: 0px;
  365.             padding-left: 0px;
  366.             padding-right: 0px;
  367.         }
  368.         div.search-box.nav-link {
  369.             margin-top: 0;
  370.         }
  371.         nav ul,
  372.         .dropdown-menu li a {
  373.             font-size: 0.75rem;
  374.             font-weight: 700;
  375.         }
  376.         li#search.nav-item {
  377.             margin-left: -1rem;
  378.             /**was -3**/
  379.         }
  380.         .navbar-expand-md .navbar-nav .nav-link {
  381.             margin-right: 0.6rem;
  382.             margin-left: 0.6rem;
  383.             padding-right: 0;
  384.             padding-left: 0;
  385.         }
  386.         .dropend .dropdown-menu[data-bs-popper] {
  387.             background-color: #fff;
  388.         }
  389.     }
  391.     @media (min-width: 992px) {
  392.         nav ul,
  393.         .dropdown-menu li a {
  394.             font-size: 1rem;
  395.             font-weight: 700;
  396.         }
  397.         .navbar-expand-md .navbar-nav .nav-link {
  398.             margin-right: 1rem;
  399.             margin-left: 1rem;
  400.             padding-right: 0;
  401.             padding-left: 0;
  402.         }
  403.     }
  405.     .navbar-nav {
  406.         --bs-nav-link-padding-x: 0;
  407.         --bs-nav-link-padding-y: 0.5rem;
  408.         --bs-nav-link-font-weight: ;
  409.         --bs-nav-link-color: #fff;
  410.         --bs-nav-link-hover-color: #fff;
  411.     }
  413.     .btn-bd-primary {
  414.         --bs-btn-color: #fff !important;
  415.         --bs-btn-bg: #D6001C;
  416.         --bs-btn-border-color: #D6001C;
  417.         --bs-btn-hover-color: #D6001C !important;
  418.         --bs-btn-hover-bg: #2E3138;
  419.         --bs-btn-hover-border-color: #2E3138;
  420.         --bs-btn-focus-shadow-rgb: 49, 132, 253;
  421.         --bs-btn-active-color: #fff;
  422.         --bs-btn-active-bg: #D6001C;
  423.         --bs-btn-active-border-color: #D6001C;
  424.         --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  425.         --bs-btn-disabled-color: #fff;
  426.         --bs-btn-disabled-bg: #D6001C;
  427.         --bs-btn-disabled-border-color: #D6001C;
  428.         --bs-btn-border-radius: 1.5rem;
  429.     }
  432.     /**Start - Search box**/
  435.     /* div */
  437.     .search-box {
  438.         position: relative;
  439.         /*was absolute*/
  440.         top: 50%;
  441.         left: 50%;
  442.         transform: translate(-50%, -50%);
  443.         background: #F6F6F6;
  444.         /* was #cd595a;*/
  445.         height: 30px;
  446.         /*was 40px*/
  447.         border-radius: 50px;
  448.         padding: 0;
  449.         /*was 10px*/
  450.     }
  453.     /* input */
  455.     .search-input {
  456.         outline: none;
  457.         border: none;
  458.         background: none;
  459.         width: 0;
  460.         padding: 0;
  461.         color: #2E3138;
  462.         float: left;
  463.         font-size: 14px;
  464.         transition: .3s;
  465.         line-height: 30px;
  466.     }
  468.     .search-input::placeholder {
  469.         color: #dbc5b0;
  470.     }
  473.     /* icon */
  475.     .search-btn {
  476.         color: #fff;
  477.         float: right;
  478.         width: 30px;
  479.         height: 30px;
  480.         border-radius: 50px;
  481.         background: #222223;
  482.         /* was #cd595a;*/
  483.         display: flex;
  484.         justify-content: center;
  485.         align-items: center;
  486.         text-decoration: none;
  487.         transition: .3s;
  488.     }
  490.     .search-input:focus,
  491.     .search-input:not(:placeholder-shown) {
  492.         width: 120px;
  493.         /*was 240px*/
  494.         padding: 0 6px;
  495.     }
  497.     .search-box:hover &gt; .search-input {
  498.         width: 120px;
  499.         padding: 0 6px;
  500.     }
  502.     .search-box:hover &gt; .search-btn,
  503.     .search-input:focus + .search-btn,
  504.     .search-input:not(:placeholder-shown) + .search-btn {
  505.         background: #222223;
  506.         color: #fff;
  507.     }
  510.     /**End - Search box**/
  513.     /**/
  515.     .dropdown-menu li {
  516.         position: relative;
  517.     }
  519.     .dropdown-menu .dropdown-submenu {
  520.         display: none;
  521.         position: absolute;
  522.         left: 100%;
  523.         top: -7px;
  524.     }
  526.     .dropdown-menu .dropdown-submenu-left {
  527.         right: 100%;
  528.         left: auto;
  529.     }
  531.     .dropdown-menu &gt; li:hover &gt; .dropdown-submenu {
  532.         display: block;
  533.     }
  536.     /**/
  539.     /*megamenu*/
  541.     .navbar .megamenu {
  542.         padding: 1rem;
  543.     }
  545.     .navbar .megamenu {
  546.         margin-top: 0px;
  547.     }
  550.     /* ============ desktop view ============ was 992px */
  552.     @media all and (min-width: 767px) {
  553.         .navbar .has-megamenu {
  554.             position: static !important;
  555.         }
  556.         .navbar .megamenu {
  557.             left: 0;
  558.             right: 0;
  559.             width: 100%;
  560.             margin-top: 70px;
  561.         }
  562.     }
  564. &lt;!-- language: lang-html --&gt;
  566.     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
  567.     &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  568.     &lt;style&gt;
  569.     html {
  570.         overflow-x: hidden;
  571.     }
  573.     body {
  574.         padding-right: 0 !important;
  575.         font-family: &quot;Cera-PRO-Regular&quot;, Arial, sans-serif;
  576.         font-weight: 300 !important;
  577.         font-size: 1rem;
  578.         line-height: 1.6;
  579.         overflow-x: hidden;
  580.         margin-top: 70px;
  581.     }
  583.     .navbar-collapse.in {
  584.         max-height: 100%;
  585.     }
  587.     .no-border {
  588.         border: none;
  589.     }
  591.     .menu-two li a.nav-link {
  592.         color: white !important;
  593.     }
  595.     .navbar-collapse {
  596.         padding-top: 70px;
  597.         padding-left: 40px;
  598.         padding-right: 40px;
  599.     }
  601.     .dropdown-menu li a {
  602.         text-decoration: none;
  603.         padding-left: 15px;
  604.         font-weight: 400;
  605.         color: #000;
  606.     }
  608.     .dropdown-menu {
  609.         --bs-dropdown-padding-y: 0;
  610.     }
  612.     @media (min-width: 768px) {
  613.         body {
  614.             margin-top: 40px;
  615.             /*130px;*/
  616.         }
  617.         .navbar-collapse {
  618.             float: left;
  619.             width: 100%;
  620.             clear: both;
  621.         }
  622.         .navbar-inverse {
  623.             border-top: 50px solid pink;
  624.         }
  625.         /*  .navbar-nav:nth-child(2) {
  626.         margin-top: 20px; 
  627.         clear: both;
  628.       }
  629.       .navbar-nav:nth-child(1) {
  630.         margin-top: -20px; 
  631.           clear: both;
  632.       } */
  633.     }
  635.     .second-nav {
  636.         margin-top: 40px;
  637.     }
  639.     li#search.nav-item {
  640.         margin-left: 0;
  641.     }
  643.     .navbar {
  644.         height: auto;
  645.     }
  647.     div.search-box.nav-link {
  648.         margin-top: 30px;
  649.     }
  651.     nav ul,
  652.     .dropdown-menu li a {
  653.         font-size: 0.875rem;
  654.         font-weight: 700;
  655.         padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  656.         display: block;
  657.     }
  659.     .text-red {
  660.         color: #D6001C;
  661.     }
  663.     .text-ltred {
  664.         color: #FF435C;
  665.     }
  667.     .text-white {
  668.         color: #fff;
  669.     }
  671.     .dropend .dropdown-menu[data-bs-popper] {
  672.         background-color: lightgrey;
  673.     }
  675.     @media (min-width: 576px) {
  676.         .navbar {
  677.             height: auto;
  678.         }
  679.         li#search.nav-item {
  680.             margin-left: 0;
  681.         }
  682.         div.search-box.nav-link {
  683.             margin-top: 30px;
  684.         }
  685.         .navbar-expand-md .navbar-nav .nav-link {
  686.             margin-right: 0.2rem;
  687.             margin-left: 0.2rem;
  688.             padding-right: 0;
  689.             padding-left: 0;
  690.         }
  691.     }
  693.     @media (min-width: 768px) {
  694.         .navbar {
  695.             height: 40px;
  696.         }
  697.         .navbar-brand img {
  698.             left: 50px;
  699.             top: 0;
  700.             width: 160px;
  701.         }
  702.         .menu-one {
  703.             margin-top: 50px;
  704.         }
  705.         .menu-two {
  706.             margin-top: 10px;
  707.         }
  708.         .menu-two li a.nav-link {
  709.             color: black !important;
  710.         }
  711.         .navbar-collapse {
  712.             padding-top: 0px;
  713.             padding-left: 0px;
  714.             padding-right: 0px;
  715.         }
  716.         div.search-box.nav-link {
  717.             margin-top: 0;
  718.         }
  719.         nav ul,
  720.         .dropdown-menu li a {
  721.             font-size: 0.75rem;
  722.             font-weight: 700;
  723.         }
  724.         li#search.nav-item {
  725.             margin-left: -1rem;
  726.             /**was -3**/
  727.         }
  728.         .navbar-expand-md .navbar-nav .nav-link {
  729.             margin-right: 0.6rem;
  730.             margin-left: 0.6rem;
  731.             padding-right: 0;
  732.             padding-left: 0;
  733.         }
  734.         .dropend .dropdown-menu[data-bs-popper] {
  735.             background-color: #fff;
  736.         }
  737.     }
  739.     @media (min-width: 992px) {
  740.         nav ul,
  741.         .dropdown-menu li a {
  742.             font-size: 1rem;
  743.             font-weight: 700;
  744.         }
  745.         .navbar-expand-md .navbar-nav .nav-link {
  746.             margin-right: 1rem;
  747.             margin-left: 1rem;
  748.             padding-right: 0;
  749.             padding-left: 0;
  750.         }
  751.     }
  753.     .navbar-nav {
  754.         --bs-nav-link-padding-x: 0;
  755.         --bs-nav-link-padding-y: 0.5rem;
  756.         --bs-nav-link-font-weight: ;
  757.         --bs-nav-link-color: #fff;
  758.         --bs-nav-link-hover-color: #fff;
  759.     }
  761.     .btn-bd-primary {
  762.         --bs-btn-color: #fff !important;
  763.         --bs-btn-bg: #D6001C;
  764.         --bs-btn-border-color: #D6001C;
  765.         --bs-btn-hover-color: #D6001C !important;
  766.         --bs-btn-hover-bg: #2E3138;
  767.         --bs-btn-hover-border-color: #2E3138;
  768.         --bs-btn-focus-shadow-rgb: 49, 132, 253;
  769.         --bs-btn-active-color: #fff;
  770.         --bs-btn-active-bg: #D6001C;
  771.         --bs-btn-active-border-color: #D6001C;
  772.         --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  773.         --bs-btn-disabled-color: #fff;
  774.         --bs-btn-disabled-bg: #D6001C;
  775.         --bs-btn-disabled-border-color: #D6001C;
  776.         --bs-btn-border-radius: 1.5rem;
  777.     }
  780.     /**Start - Search box**/
  783.     /* div */
  785.     .search-box {
  786.         position: relative;
  787.         /*was absolute*/
  788.         top: 50%;
  789.         left: 50%;
  790.         transform: translate(-50%, -50%);
  791.         background: #F6F6F6;
  792.         /* was #cd595a;*/
  793.         height: 30px;
  794.         /*was 40px*/
  795.         border-radius: 50px;
  796.         padding: 0;
  797.         /*was 10px*/
  798.     }
  801.     /* input */
  803.     .search-input {
  804.         outline: none;
  805.         border: none;
  806.         background: none;
  807.         width: 0;
  808.         padding: 0;
  809.         color: #2E3138;
  810.         float: left;
  811.         font-size: 14px;
  812.         transition: .3s;
  813.         line-height: 30px;
  814.     }
  816.     .search-input::placeholder {
  817.         color: #dbc5b0;
  818.     }
  821.     /* icon */
  823.     .search-btn {
  824.         color: #fff;
  825.         float: right;
  826.         width: 30px;
  827.         height: 30px;
  828.         border-radius: 50px;
  829.         background: #222223;
  830.         /* was #cd595a;*/
  831.         display: flex;
  832.         justify-content: center;
  833.         align-items: center;
  834.         text-decoration: none;
  835.         transition: .3s;
  836.     }
  838.     .search-input:focus,
  839.     .search-input:not(:placeholder-shown) {
  840.         width: 120px;
  841.         /*was 240px*/
  842.         padding: 0 6px;
  843.     }
  845.     .search-box:hover &gt; .search-input {
  846.         width: 120px;
  847.         padding: 0 6px;
  848.     }
  850.     .search-box:hover &gt; .search-btn,
  851.     .search-input:focus + .search-btn,
  852.     .search-input:not(:placeholder-shown) + .search-btn {
  853.         background: #222223;
  854.         color: #fff;
  855.     }
  858.     /**End - Search box**/
  861.     /**/
  863.     .dropdown-menu li {
  864.         position: relative;
  865.     }
  867.     .dropdown-menu .dropdown-submenu {
  868.         display: none;
  869.         position: absolute;
  870.         left: 100%;
  871.         top: -7px;
  872.     }
  874.     .dropdown-menu .dropdown-submenu-left {
  875.         right: 100%;
  876.         left: auto;
  877.     }
  879.     .dropdown-menu &gt; li:hover &gt; .dropdown-submenu {
  880.         display: block;
  881.     }
  884.     /**/
  887.     /*megamenu*/
  889.     .navbar .megamenu {
  890.         padding: 1rem;
  891.     }
  893.     .navbar .megamenu {
  894.         margin-top: 0px;
  895.     }
  898.     /* ============ desktop view ============ was 992px */
  900.     @media all and (min-width: 767px) {
  901.         .navbar .has-megamenu {
  902.             position: static !important;
  903.         }
  904.         .navbar .megamenu {
  905.             left: 0;
  906.             right: 0;
  907.             width: 100%;
  908.             margin-top: 70px;
  909.         }
  910.     }
  911.     &lt;/style&gt;
  912.     &lt;nav class=&quot;navbar navbar-expand-md navbar-dark fixed-top bg-dark&quot;&gt;
  913.         &lt;div class=&quot;container-fluid&quot;&gt; &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt; LOGO &lt;/a&gt;
  914.             &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarCollapse&quot; aria-controls=&quot;navbarCollapse&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt; &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt; &lt;/button&gt;
  915.             &lt;!-- start test --&gt;
  916.             &lt;div class=&quot;row navbar-collapse&quot; id=&quot;navbarCollapse&quot;&gt;
  917.                 &lt;div class=&quot;col-md-12 order-last menu-one&quot;&gt;
  918.                     &lt;!-- start--&gt;
  919.                     &lt;ul class=&quot;navbar-nav ms-auto mb-2 mb-md-0 nav navbar-right justify-content-end&quot;&gt;
  920.                         &lt;hr class=&quot;white d-block d-md-none&quot;&gt;
  921.                         &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;login &lt;/a&gt; &lt;/li&gt;
  922.                         &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;support &lt;span class=&quot;text-ltred&quot;&gt;1300 000 123&lt;/span&gt;&lt;/a&gt; &lt;/li&gt;
  923.                         &lt;li class=&quot;nav-item dropdown&quot;&gt; &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;  Global sites &lt;/a&gt;
  924.                             &lt;ul class=&quot;dropdown-menu dropdown-menu-end&quot;&gt;
  925.                                 &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;United States / Canada&lt;/a&gt;&lt;/li&gt;
  926.                                 &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;New Zealand&lt;/a&gt;&lt;/li&gt;
  927.                             &lt;/ul&gt;
  928.                         &lt;/li&gt;
  929.                         &lt;li class=&quot;nav-item&quot; id=&quot;search&quot;&gt;
  930.                             &lt;div class=&quot;search-box nav-link&quot;&gt;
  931.                                 &lt;input type=&quot;text&quot; class=&quot;search-input&quot; placeholder=&quot;Search&quot;&gt;
  932.                                 &lt;a class=&quot;search-btn&quot; href=&quot;#&quot;&gt; ? &lt;/a&gt; &lt;/div&gt;
  933.                         &lt;/li&gt;
  934.                     &lt;/ul&gt;
  935.                     &lt;!-- end --&gt;
  936.                 &lt;/div&gt;
  937.                 &lt;div class=&quot;col-md-12 order-md-last menu-two&quot;&gt;
  938.                     &lt;!-- start--&gt;
  939.                     &lt;ul class=&quot;navbar-nav ms-auto mb-2 mb-md-0 nav navbar-right justify-content-end&quot;&gt;
  940.                         &lt;li class=&quot;nav-item dropdown has-megamenu&quot;&gt; &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; data-bs-toggle=&quot;dropdown&quot;&gt;Solutions &amp;amp; services&lt;/a&gt;
  941.                             &lt;div class=&quot;dropdown-menu megamenu&quot; role=&quot;menu&quot;&gt;
  942.                                 &lt;div class=&quot;row g-3&quot;&gt;
  943.                                     &lt;div class=&quot;col-md-6 col-12&quot;&gt;
  944.                                         &lt;div class=&quot;col-megamenu&quot;&gt;
  945.                                             &lt;h6 class=&quot;title&quot;&gt;Solutions &amp;amp; services&lt;/h6&gt;
  946.                                             &lt;ul class=&quot;list-unstyled&quot;&gt;
  947.                                                 &lt;li class=&quot;dropend&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;dropdown-item dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; data-bs-auto-close=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Leasing solutions&lt;/a&gt;
  948.                                                     &lt;ul class=&quot;dropdown-menu no-border&quot;&gt;
  949.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Transfer my fleet&lt;/a&gt;&lt;/li&gt;
  950.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Start a new fleet&lt;/a&gt;&lt;/li&gt;
  951.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Electric vehicles&lt;/a&gt;&lt;/li&gt;
  952.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Next lease&lt;/a&gt;&lt;/li&gt;
  953.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Trucks, plant &amp;amp; equipment&lt;/a&gt;&lt;/li&gt;
  954.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Used vehicles&lt;/a&gt;&lt;/li&gt;
  955.                                                     &lt;/ul&gt;
  956.                                                 &lt;/li&gt;
  957.                                                 &lt;li class=&quot;dropend&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;dropdown-item dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; data-bs-auto-close=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Fleet management services&lt;/a&gt;
  958.                                                     &lt;ul class=&quot;dropdown-menu no-border&quot;&gt;
  959.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Accident management&lt;/a&gt;&lt;/li&gt;
  960.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Acquisition and disposals&lt;/a&gt;&lt;/li&gt;
  961.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Driver safety&lt;/a&gt;&lt;/li&gt;
  962.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Fleet card&lt;/a&gt;&lt;/li&gt;
  963.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Hire vehicles&lt;/a&gt;&lt;/li&gt;
  964.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Infringement management&lt;/a&gt;&lt;/li&gt;
  965.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Insurance&lt;/a&gt;&lt;/li&gt;
  966.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Maintenance&lt;/a&gt;&lt;/li&gt;
  967.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; PoolCar sharing platform&lt;/a&gt;&lt;/li&gt;
  968.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Registration&lt;/a&gt;&lt;/li&gt;
  969.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Roadside assistance&lt;/a&gt;&lt;/li&gt;
  970.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Telematics&lt;/a&gt;&lt;/li&gt;
  971.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Toll management&lt;/a&gt;&lt;/li&gt;
  972.                                                     &lt;/ul&gt;
  973.                                                 &lt;/li&gt;
  974.                                                 &lt;li class=&quot;dropend&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;dropdown-item dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; data-bs-auto-close=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Fleet optimisation&lt;/a&gt;
  975.                                                     &lt;ul class=&quot;dropdown-menu no-border&quot;&gt;
  976.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Corporate financing&lt;/a&gt;&lt;/li&gt;
  977.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Leasing&lt;/a&gt;&lt;/li&gt;
  978.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Sales and lease back&lt;/a&gt;&lt;/li&gt;
  979.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Strategic consulting&lt;/a&gt;&lt;/li&gt;
  980.                                                         &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;&quot;&gt; Technology integration&lt;/a&gt;&lt;/li&gt;
  981.                                                     &lt;/ul&gt;
  982.                                                 &lt;/li&gt;
  983.                                             &lt;/ul&gt;
  984.                                         &lt;/div&gt;
  985.                                         &lt;!-- col-megamenu.// --&gt;
  986.                                     &lt;/div&gt;
  987.                                     &lt;!-- end col-3 --&gt;
  988.                                 &lt;/div&gt;
  989.                                 &lt;!-- end row --&gt;
  990.                             &lt;/div&gt;
  991.                             &lt;!-- dropdown-mega-menu.// --&gt;
  992.                         &lt;/li&gt;
  993.                         &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Driver Support&lt;/a&gt;&lt;/li&gt;
  994.                         &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  995.                         &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;News&lt;/a&gt;&lt;/li&gt;
  996.                         &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Resources&lt;/a&gt;&lt;/li&gt;
  997.                         &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;btn btn-bd-primary&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Contact us&lt;/a&gt;&lt;/li&gt;
  998.                     &lt;/ul&gt;
  999.                     &lt;!-- end --&gt;
  1000.                 &lt;/div&gt;
  1001.             &lt;/div&gt;
  1002.             &lt;!-- end test --&gt;
  1003.         &lt;/div&gt;
  1004.     &lt;/nav&gt;
  1006. &lt;!-- end snippet --&gt;
  1010. </details>

huangapple
  • 本文由 发表于 2023年4月13日 18:31:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/76004404.html
  • bootstrap-5
  • css
  • dropdown
  • html
  • nav
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定