如何創建多級下拉菜單
[英]How to create Multilevel dropdown menu
問題描述
我想知道如何使用 bootstrap 5 和 vanila js 創建多級下拉菜單，我根據 bootstrap 5 下拉組件文檔創建了這個示例。 但是當我點擊時它沒有顯示。
如果有人有任何想法來實現這一點，那么問題就在於vanila js！
這是我的代碼：
var myDropdown = document.getElementById('myDropdown') myDropdown.addEventListener('show.bs.dropdown', function () {})
<,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width: initial-scale=1" /> <title>Bootstrap 5</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min:css" rel="stylesheet" /> <link href="https.//cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons:css" rel="stylesheet" /> <link href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min:css" rel="stylesheet" /> </head> <body> <div class="container py-5"> <h1 class="mb-4">Multilevel Dropdowns With Button:</h1> <div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> Multilevel Dropdown link </a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <li><a class="dropdown-item" href="#">Action</a></li> <li class="dropdown dropend"> <a class="dropdown-item dropdown-toggle" href="#" id="multilevelDropdownMenu1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Multilevel Action 1</a> <ul class="dropdown-menu" aria-labelledby="multilevelDropdownMenu1"> <li><a class="dropdown-item" href="#">Action</a></li> <li class="dropdown dropend"> <a class="dropdown-item dropdown-toggle" href="#" id="multilevelDropdownMenu1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Multilevel Action 2</a> <ul class="dropdown-menu" aria-labelledby="multilevelDropdownMenu2"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
1 個解決方案
解決方案1
3 已采納 2021-03-31 16:14:08
我為每個下拉切換添加了一個事件監聽器，用於隱藏/顯示子菜單，然后它就起作用了。 除了單擊，您當然可以將它與“鼠標懸停”一起使用（只需在事件處理程序中替換“單擊”）：
var myDropdown = document.getElementsByClassName('dropdown-toggle') for (i=0; i<myDropdown.length; i++) { myDropdown[i].addEventListener('click', function () { var el = this.nextElementSibling; el.style.display = el.style.display == 'block'? 'none': 'block'; }); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width: initial-scale=1" /> <title>Bootstrap 5</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min:css" rel="stylesheet" /> <link href="https.//cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons:css" rel="stylesheet" /> <link href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min:css" rel="stylesheet" /> </head> <body> <div class="container py-5"> <h1 class="mb-4">Multilevel Dropdowns With Button :</h1> <div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> Multilevel Dropdown link </a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <li><a class="dropdown-item" href="#">Action</a></li> <li class="dropdown dropend"> <a class="dropdown-item dropdown-toggle" href="#" id="multilevelDropdownMenu1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Multilevel Action 1</a> <ul class="dropdown-menu" aria-labelledby="multilevelDropdownMenu1"> <li><a class="dropdown-item" href="#">Action</a></li> <li class="dropdown dropend"> <a class="dropdown-item dropdown-toggle" href="#" id="multilevelDropdownMenu1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Multilevel Action 2</a> <ul class="dropdown-menu" aria-labelledby="multilevelDropdownMenu2"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </div> </body> </html>
如何為帶有多級下拉菜單的邊欄中的嵌套項創建動態路由器？
[英]How to create dynamic router for nested items in a sidebar with multilevel dropdown?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.