如何為移動屏幕的導航欄項目添加切換按鈕，並使用 HTML、CSS 和 Bootstrap v4 將它們切換為下拉菜單

Question

我在桌面顯示的導航欄中顯示 hover 上的下拉菜單，但為了響應，我想在移動屏幕上的導航菜單右側添加一個按鈕，並使用它來切換下拉菜單菜單打開和關閉。

我正在尋找的屏幕截圖，用於移動屏幕下拉菜單的切換按鈕：

這是我的代碼：

 .nav-link { display: inline-block; position: relative; color: black; } html,body{ height: 100%; width: 100%; font-family: 'Poppins', sans-serif; color: #222; }.navbar{ padding: .8rem; }.navbar { padding-right: 15px; padding-left: 15px; }.navbar.container { width: auto; }.cart { position: absolute; right: 5%; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; }.navbar-nav li:first-child{ display: none; } @media (max-width: 768px) {.navbar { border-radius: 4px; padding-right: 0; padding-left: 0; }.navbar-brand{ align-items: center; padding-right: 10%; }.navbar-nav li:not(:first-child){ border-bottom: 1px solid #000; }.navbar-nav li:first-child{ display: block; } #myNavbarToggler13 { position: fixed; top: 0; left: 0; z-index: 999999; width: 75%; height: 100%; background-color: #f9f9f9; overflow: auto; bottom: 0; max-height: inherit; }.nav-item{ transition: 0.3s; padding: 5px 35px 0px; /*margin: 5px 0 0 50px;*/ } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" role="navigation"> <button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#myNavbarToggler13" aria-controls="myNavbarToggler13" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-nav navbar-brand mx-auto" href="#"><img id="logo">Brand <button class="cart" type="button" data-toggle="slide-collapse" data-target="#cartToggler" aria-controls="cartToggler" aria-expanded="false" aria-label="cartToggle navigation"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16"> <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z"/> </svg> </button> </a> <div class="collapse navbar-collapse" id="myNavbarToggler13"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" id="crossButton" href="#">X</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 1</a> <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">subitem 1</a> <a class="dropdown-item" href="#">subitem 2</a> <a class="dropdown-item" href="#">subitem 3</a> <a class="dropdown-item" href="#">subitem 4</a> <a class="dropdown-item" href="#">subitem 5</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 2</a> <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">subitem 1</a> <a class="dropdown-item" href="#">subitem 2</a> <a class="dropdown-item" href="#">subitem 3</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 3</a> <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">subitem 1</a> <a class="dropdown-item" href="#">subitem 2</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> </ul> </div> <div class="collapse navbar-collapse" id="cartToggler"> </div> </nav> <script> $(".navbar-toggler ").on('click', function() { $navMenuCont = $($(this).data('target')); $navMenuCont.animate({ 'width': 'toggle' }, 350); $(".menu-overlay").fadeIn(500); }); $(".menu-overlay").click(function(event) { $(".navbar-toggler").trigger("click"); $(".menu-overlay").fadeOut(500); }); $("#crossButton").click(function(event) { $(".navbar-toggler").trigger("click"); $(".menu-overlay").fadeOut(500); }); </script>

Answer 1

您可以使用 jQuery 的parent 、 siblings和children選擇器，並根據需要切換元素的顯示。

注意：為了使其正常工作，您必須刪除下拉切換元素的href ，否則它將帶您到另一個頁面

下面的例子

 $(".navbar-toggler ").on('click', function() { $navMenuCont = $($(this).data('target')); $navMenuCont.animate({ 'width': 'toggle' }, 350); $(".menu-overlay").fadeIn(500); }); $(".menu-overlay").click(function(event) { $(".navbar-toggler").trigger("click"); $(".menu-overlay").fadeOut(500); }); $("#crossButton").click(function(event) { $(".navbar-toggler").trigger("click"); $(".menu-overlay").fadeOut(500); }); $('.nav-item.nav-link').click(function(){ $(this).siblings('.dropdown-menu').slideToggle(); $(this).parent().siblings('li').children('.dropdown-menu').hide(); });

 .nav-link { display: inline-block; position: relative; color: black; } html,body{ height: 100%; width: 100%; font-family: 'Poppins', sans-serif; color: #222; }.navbar{ padding: .8rem; }.navbar { padding-right: 15px; padding-left: 15px; }.navbar.container { width: auto; }.cart { position: absolute; right: 5%; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; }.navbar-nav li:first-child{ display: none; }.navbar { border-radius: 4px; padding-right: 0; padding-left: 0; }.navbar-brand{ align-items: center; padding-right: 10%; }.navbar-nav li:not(:first-child){ border-bottom: 1px solid #000; }.navbar-nav li:first-child{ display: block; } #myNavbarToggler13 { position: fixed; top: 0; left: 0; z-index: 999999; width: 75%; height: 100%; background-color: #f9f9f9; overflow: auto; bottom: 0; max-height: inherit; }.nav-item{ transition: 0.3s; padding: 5px 35px 0px; /*margin: 5px 0 0 50px;*/ }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" role="navigation"> <button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#myNavbarToggler13" aria-controls="myNavbarToggler13" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-nav navbar-brand mx-auto" href="#"><img id="logo">Brand <button class="cart" type="button" data-toggle="slide-collapse" data-target="#cartToggler" aria-controls="cartToggler" aria-expanded="false" aria-label="cartToggle navigation"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16"> <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z"/> </svg> </button> </a> <div class="collapse navbar-collapse" id="myNavbarToggler13"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" id="crossButton" href="#">X</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdown">item 1</a> <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown"> <a class="dropdown-item" >subitem 1</a> <a class="dropdown-item" href="">subitem 2</a> <a class="dropdown-item" href="">subitem 3</a> <a class="dropdown-item" href="">subitem 4</a> <a class="dropdown-item" href="">subitem 5</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdown">item 2</a> <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">subitem 1</a> <a class="dropdown-item" href="#">subitem 2</a> <a class="dropdown-item" href="#">subitem 3</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdown">item 3</a> <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">subitem 1</a> <a class="dropdown-item" href="#">subitem 2</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> </ul> </div> <div class="collapse navbar-collapse" id="cartToggler"> </div> </nav>

jQuery兄弟姐妹參考： https://api.jquery.com/siblings/

jQuery 家長參考： https://api.jquery.com/parents/

jQuery 兒童參考： https://api.jquery.com/children/