[英]Navbar dropdown (collapse) is not working in Bootstrap 5
我在嘗試使用Bootstrap 5創建響應式菜單或下拉按鈕時遇到問題。一切似乎都很好。導航圖標和下拉圖標出現。但它不起作用。當我單擊nav圖標或dropdown按鈕時，沒有dropdown menu出現.
我要特別提一下，我還包含了jquery文件。 但它沒有用。 誰能告訴我這里發生了什么？
最后一件事，我遇到了其他一些bootstrap類（如mr-auto 、 ml-auto等）的嚴重問題。 bootstrap 5是否有任何錯誤或新類用於此類工作？
這是我的代碼：
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>Bootstrap</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" /> </head> <body> <nav class="navbar navbar-dark bg-dark navbar-expand-md"> <a href="#" class="navbar-brand">DemoTech</a> <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar" > <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="navbar" navbar> <ul class="navbar-nav"> <li class="nav-item"><a href="#" class="nav-link">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </div> </nav> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous" ></script> </body> </html>
Bootstrap 4 中使用的data-*屬性在 Bootstrap 5中已替換為data-bs-*
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
如文檔中所述，所有 JavaScript 插件的數據屬性現在都已命名，以幫助將 Bootstrap 功能與第三方和您自己的代碼區分開來。 這意味着任何 javascript 組件（折疊、導航欄、輪播、下拉、選項卡、模態等）只能使用data-bs-...屬性。
Bootstrap 5 是具有重大更改的重大更新。 另請參閱此處ml-auto / mr-auto已更改為ms-auto / me-auto 。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
確保您已在 head 標簽中為 Javascript 和 CSS 添加了來自引導主頁的 jsDeliver CDN 鏈接。
**<!-- CSS only -->**
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
**<!-- JavaScript Bundle with Popper -->**
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
您已經使用了舊 bootsrap 版本中使用的“data-toggle”這個屬性，而在 bootstrap 5 中，您需要使用這個屬性“data-bs-toggle”，而另一件最重要的事情是您已經做了（aria-expanded = “true” )
我正在編輯的當前站點中的下拉菜單存在問題。 今晚我終於有了一個帶有下拉菜單的導航菜單，允許在單擊鏈接后關閉下拉菜單。 我通過不同的模板對其進行了樣式設置，但是，當我將菜單添加到我正在編輯的站點時； 移動切換菜單沒有打開嗎？ 我該如何解決這個問題：謝謝！ :--)
<.-- ======= Header ======= --> <header id="header" class="fixed-top d-flex align-items-center"> <div class="container"> <div class="header-container d-flex align-items-center justify-content-between"> <div class="logo"> <.--<h1 class="text-light"><a href="index.html">LOGO TEXT</a></h1>--> <.-- Uncomment below if you prefer to use an image logo --> <a class="scrollto" href="#intro"><img src="img/UCF-Logo.svg" height="50" alt="U C F" title="U C F" class="img-fluid top-logo wow bounceOut"></a> <!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>--> </div> <nav id="navbar" class="navbar"> <ul> <!--<li><a class="nav-link scrollto active" href="#hero">Home</a></li> <li><a class="nav-link scrollto" href="#about">About</a></li> <li><a class="nav-link scrollto" href="#services">Services</a></li> <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li> <li><a class="nav-link scrollto" href="#team">Team</a></li>--> <li class="dropdown"><a href="#"><span>About <i class="fas fa-arrow-down"></i></span></a> <ul> <li><a class="scrollto" href="#about">About</a></li> <li><a class="scrollto" href="#more-about">Detailed Info</a></li> <li><a class="scrollto" href="#about">DropDown 03</a></li> <li><a class="scrollto" href="#about">DropDown 04</a></li> <li><a class="scrollto" href="#about">DropDown 05</a></li> </ul> </li> <li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a> <ul> <li><a class="scrollto" href="#about">DropDown 06</a></li> <li><a class="scrollto" href="#about">DropDown 07</a></li> <li><a class="scrollto" href="#about">DropDown 08</a></li> <li><a class="scrollto" href="#about">DropDown 09</a></li> <li><a class="scrollto" href="#about">DropDown 10</a></li> </ul> </li> <li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a> <ul> <li><a class="scrollto" href="#contact">Contact Info</a></li> <li><a class="scrollto" href="#about">DropDown 12</a></li> <li><a class="scrollto" href="#about">DropDown 13</a></li> <li><a class="scrollto" href="#about">DropDown 14</a></li> <li><a class="scrollto" href="#about">DropDown 15</a></li> </ul> </li> <!--<li><a href="#">Drop Down 2</a></li> <li><a href="#">Drop Down 3</a></li> <li><a href="#">Drop Down 4</a></li> </ul> </li>--> <!--<li><a class="nav-link scrollto" href="#contact">Contact</a></li>--> <li><a class="register scrollto" href="#about">REGISTER! <i class="fas fa-smile-beam fa-x2"></i></a></li> </ul> <i class="fas fa-bars mobile-nav-toggle"></i> </nav><!-- .navbar --> </div><!-- End Header Container --> </div> </header><!-- End Header -->
我也面臨同樣的問題首先我將 data-target 更改為 data-bs-target 並將 data-toggle 更改為 data-bs-toggle 第二個我包括 bootstrap.bundle.min.js 和普通 bootstrap.min.js 的 cdn 鏈接添加兩個相同的腳本導致問題
`
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarSupportedContent" class="collapse navbar-collapse" >
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href=@Url.Action("Index","Home")>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href=@Url.Action("AboutUs","Home")>About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href=@Url.Action("OurTeam","Home")>Our Team</a>
</li>
@*<li class="nav-item">
<a class="nav-link" href=@Url.Action("Blog","Home")>Blog</a>
</li>*@
<li class="nav-item">
<a class="nav-link" href=@Url.Action("ContactUs","Home")>Contact Us</a>
</li>
@*<li class="nav-item">
<a class="nav-link" href=@Url.Action("LoanCalculator","Home")>Loan Calculator</a>
</li>*@
</ul>
</div>
</nav>`
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>Bootstrap</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" /> </head> <body> <nav class="navbar navbar-dark bg-dark navbar-expand-md"> <a href="#" class="navbar-brand">DemoTech</a> <button class="navbar-toggler" **data-bs-toggle="collapse" data-bs-target="#navbar"** > <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="navbar" navbar> <ul class="navbar-nav"> <li class="nav-item"><a href="#" class="nav-link">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </div> </nav> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous" ></script> </body> </html>
這里是'data-bs-target' id
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#kickMyAss">
和 div id 必須相同
<div id="kickMyAss" class="collapse navbar-collapse">
您使用 Bootstrap 3 中使用的“data-toggle”這個屬性，您需要使用這個屬性“data-bs-toggle”
導航欄下拉和折疊不起作用 [wordpress + bootstrap]
[英]navbar dropdown and collapse not working[wordpress + bootstrap]
切換按鈕折疊在引導程序中的Bootstrap導航欄中不起作用
[英]Toggle button collapse not working in Bootstrap navbar in bootstrap
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.