Bootstrap 5：我需要做什么才能在导航栏中有一个搜索图标，当我单击它时，它会在导航栏下方显示一个搜索框？

Question

这是我到目前为止为导航栏所做的

我需要在登录按钮旁边放一个搜索图标。 当我单击搜索图标时，导航栏下方会出现一个搜索框，如下图所示。 我的导航栏是透明的，position 是相对的，下面的 header 是带有自动播放功能的视频循环，position 是相对的。

取自 DataCamp 网站

我尝试过来自其他网站的免费模板代码，但是当与我现有的代码结合使用时会产生奇怪的结果，并且我尝试更改模板代码，仍然是负面结果。 如果可能的话，我想尽量减少 js 和 css 的使用，这样我就可以轻松地调整外观而不会太麻烦。 感谢您的帮助。

Answer 1

您需要一个标志shouldShowSearchInput 。 默认情况下，它应该是假的。

您可以使用它将Search Input Element的display更改为none或block

当您单击SearchIcon时，会更改该标志的值。

Answer 2

您只需要 position 导航栏下的搜索框。 然后添加一个 class 使其可见，并将事件侦听器添加到用于打开和关闭 class 的按钮。

请参阅下面的片段

 document.querySelector(`#btn-search`).addEventListener(`click`, function() { document.querySelector(`#search`).classList.toggle(`show-search`); });

 #search { bottom: 0; right: 0; width: 25%; z-index: -1; transition: transform 500ms; position: absolute; }.show-search { transform: translate(0, 100%); }

 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css' integrity='sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==' crossorigin='anonymous' /> <nav class="navbar navbar-dark navbar-expand bg-dark py-3 position-relative"> <div class="container"> <ul class="navbar-nav me-auto"> <li class="nav-item"> <a class="nav-link active" href="#">First Item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Second Item</a> </li> </ul> <div class="d-block"> <input type="search" id="search" class="form-control position-absolute shadow-sm" placeholder="Search"> <a class="btn btn-light me-2" role="button" id="btn-search" href="#"></a> <a class="btn btn-primary" role="button" href="#">Login</a> </div> </div> </nav>

您还可以使用烘焙到引导程序中的非画布组件： https://getbootstrap.com/docs/5.2/components/offcanvas/

请参阅下面的 canvas 片段

 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css' integrity='sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==' crossorigin='anonymous' /> <nav class="navbar navbar-dark navbar-expand bg-dark py-3 position-relative"> <div class="container"> <ul class="navbar-nav me-auto"> <li class="nav-item"> <a class="nav-link active" href="#">First Item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Second Item</a> </li> </ul> <div class="d-block"> <button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"></button> <a class="btn btn-primary" role="button" href="#">Login</a> </div> </div> </nav> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body"> <input type="search" id="search" class="form-control shadow-sm" placeholder="Search"> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.bundle.min.js' integrity='sha512-1TK4hjCY5+E9H3r5+05bEGbKGyK506WaDPfPe1s/ihwRjr6OtL43zJLzOFQ+/zciONEd+sp7LwrfOCnyukPSsg==' crossorigin='anonymous'></script>