如何为移动屏幕的导航栏项目添加切换按钮，并使用 HTML、CSS 和 Bootstrap v4 为下拉菜单切换它们

Question

我在桌面显示的导航栏中悬停时显示下拉菜单，但为了响应它，我想在移动屏幕上的导航菜单右侧添加一个按钮并使用它打开和关闭下拉菜单。

我正在寻找的屏幕截图，用于移动屏幕下拉菜单的切换按钮：

这是我的代码：

.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/

如何为移动屏幕的导航栏项目添加切换按钮，并使用 HTML、CSS 和 Bootstrap v4 为下拉菜单切换它们

How can I add toggle buttons for navbar items for mobile screen and toggle them for dropdown menu using HTML, CSS and Bootstrap v4

html

javascript

css

responsive-design

bootstrap-4