[英]Dropdown menu not showing the listed elements when hovered
由於某種原因,此下拉菜單在懸停時未顯示列出的元素。 使用引導程序。
我在這里錯過了什么嗎? 也許這很簡單,但我就是看不到。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Services --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <h6 class="dropdown-header">Dropdown header</h6> <a class="dropdown-item" href="#">Rewiring</a> <a class="dropdown-item" href="#">Light Fixes</a> <a class="dropdown-item" href="#">Showers</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Rewiring</a> <a class="dropdown-item" href="#">Light Fixes</a> <a class="dropdown-item" href="#">Showers</a> </div> </li>
更改<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
至
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button>
將其更改為按鈕,然后它應該工作!
在 Bootstrap 中,下拉菜單默認在鼠標點擊時運行,如果你想在鼠標 hover 上顯示下拉菜單,那么你必須使用 css 或 js
我用過 css
.dropdown:hover ul.dropdown-menu{ display: block; }
.dropdown:hover ul.dropdown-menu{ display: block; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Services </button> <ul class="dropdown-menu"> <li><h6 class="dropdown-header">Dropdown header</h6></li> <li><a class="dropdown-item" href="#">Rewiring</a></li> <li><a class="dropdown-item" href="#">Light Fixes</a></li> <li><a class="dropdown-item" href="#">Showers</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Rewiring</a></li> <li><a class="dropdown-item" href="#">Light Fixes</a></li> <li><a class="dropdown-item" href="#">Showers</a></li> </ul> </div>
更多內容可以在這里討論:
在 BS 中打開下拉菜單由Popper.js
(它不是bootstrap.min.js
的一部分)完成。 因此,為了使下拉菜單正常工作,您需要通過 bundle 加載 Bootstrap JS,其中包含Popper.js https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min .js
由於您使用的是 BS5,因此您需要將data-toggle="dropdown"
更改為data-bs-toggle="dropdown"
。 這是從版本 5 開始的新標記。
正如另一個答案中提到的,單擊(而不是懸停)打開下拉菜單是 BS 哲學的核心部分(不幸的是)。 因此,如果您想打開 hover 上的子菜單,則必須添加額外的 CSS。
還要小心標記。 使用 BS 推薦的導航結構會更干凈(使用<ul>
, <li>
等)
我找到了解決方案:
這是造成麻煩的線路。
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
我只是通過 Bootstrap 添加了以下內容:
aria-haspopup="true" aria-expanded="false"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.