我要求在鏈接單擊后折疊此導航欄而不是 javascript 事件偵聽器或 data-bs-toggle 和 data-bs-target 在那篇文章(文章鏈接)中回答的兩種方法都不適用于我的代碼。
這是我的代碼:
<header class="header-nav" id="home">
<nav class="navbar navbar-expand-lg custom-nav fixed-top">
<div class="container-fluid">
<a id="brand" href="#"><span>C</span> Solutions</a>
<button
class="navbtn"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span><i class="fas fa-bars burger-menu"></i></span>
</button>
<div
class="collapse navbar-collapse justify-content-between"
id="navbarSupportedContent"
>
<ul class="navbar-nav m-auto mb-2 mb-lg-0 text-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">why choose us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#our-clients">our clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<button class="btn btn-primary">request a quote</button>
</ul>
</div>
</div>
</nav>
</header>
有人可以幫忙嗎?
uj5u.com熱心網友回復:
您的代碼有效,您只是忘記在 index.html 中添加 boostrap.bundle.min.js。
將此添加到您的 index.html 中。就這樣!
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
而且你不需要添加額外的js代碼。只在你的 index.html 中添加它,它應該可以作業。
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/496992.html
標籤:javascript html 引导程序 5
