出于某種原因，此下拉選單在懸停時未顯示列出的元素。使用引導程式。
我在這里錯過了什么嗎？也許這很簡單，但我就是看不到它。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>uj5u.com熱心網友回復：
改變 <a href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
到
<button type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button>
把它改成一個按鈕就可以了！！
uj5u.com熱心網友回復：
在 Bootstrap 中，下拉選單默認在滑鼠單擊時運行，如果您想在滑鼠懸停時顯示下拉選單，則必須使用 css 或 js
我用過 css
.dropdown:hover ul.dropdown-menu{ display: block; }
.dropdown:hover ul.dropdown-menu{ display: block; }<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>uj5u.com熱心網友回復：
更多的事情要在這里討論：
BS 中的打開下拉串列由
Popper.js（不屬于bootstrap.min.js）完成。因此，為了使下拉串列作業，您需要通過包加載 Bootstrap JS，其中包含 Popper.js https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min .js由于您使用的是 BS5，因此您需要更改
data-toggle="dropdown"為data-bs-toggle="dropdown". 這是從第 5 版開始的新標記。正如另一個答案中提到的，點擊（而不是懸停）打開下拉選單是 BS 哲學的核心部分（不幸的是）。因此，如果您想在懸停時打開子選單，則必須添加額外的 CSS。
還要小心標記。這將是更干凈使用由BS推薦的結構的導航（使用
<ul>，<li>等等）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385343.html