Bootstrap 5 导航栏折叠 div 高度不起作用

Question

我正在使用 bootstrap5 导航栏。在导航栏中有下拉菜单链接。它可以工作，但问题是在 320*480 屏幕尺寸上，下拉菜单会折叠，但无法滚动或访问下拉菜单中的菜单项。任何人都可以帮助我解决这个问题。提前感谢您的帮助。我的代码：https://codepen.io/ANANTHUC/full/RwjvVKe

$(function () {
  $(".dropdown-menu a.dropdown-toggle").on("click", function (e) {
    if (!$(this).next().hasClass("show")) {
      $(this).parents(".dropdown-menu").first().find(".show").removeClass("show");
    }
    var $subMenu = $(this).next(".dropdown-menu");
    $subMenu.toggleClass("show");

    $(this)
      .parents("li.nav-item.dropdown.show")
      .on("hidden.bs.dropdown", function (e) {
        $(".dropdown-submenu .show").removeClass("show");
      });

    return false;
  });

  $(".firstLevel").on("click", function (e) {
    $(this).toggleClass("dropdown-Opened");
    var sublevel_Dropdown = $(".firstLevel").next("ul").find(".subLevel");
    if (sublevel_Dropdown.hasClass("dropdown-Opened")) {
      $(sublevel_Dropdown).removeClass("dropdown-Opened");
      $(sublevel_Dropdown).next('.dropdown-menu').removeClass("show")
    }
    if ($(".firstLevel").not(this).hasClass("dropdown-Opened")) {
      $(".firstLevel").not(this).removeClass("dropdown-Opened");
      //alert("class added");
    }
  });

  $(".subLevel").on("click", function (e) {
    $(this).toggleClass("dropdown-Opened");
  });
  var main__nestedDropdown = $(".subLevel").parent("li").parent("ul").prev("a.subLevel");
  $(main__nestedDropdown).on("click", function (e) {
    var child__nestedDropdown = main__nestedDropdown.next("ul").find("a.subLevel");
    // alert("class added");
    if (child__nestedDropdown.hasClass("dropdown-Opened")) {
      $(child__nestedDropdown).removeClass("dropdown-Opened");
    }
  });
});

.menu-area {
  background: #563d7c;
}
.dropdown-menu {
  padding: 0;
  margin: 0;
  border: 0 solid transition !important;
  border: 0 solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.mainmenu a,
.navbar-default .navbar-nav > li > a,
.mainmenu ul li a,
.navbar-expand-lg .navbar-nav .nav-link {
  color: #fff !important;
  font-size: 16px;
  text-transform: capitalize;
  padding: 16px 15px;
  font-family: "Roboto", sans-serif;
  display: block !important;
}
.mainmenu .active a,
.mainmenu .active a:focus,
.mainmenu .active a:hover,
.mainmenu li a:hover,
.mainmenu li a:focus,
.navbar-default .navbar-nav > .show > a,
.navbar-default .navbar-nav > .show > a:focus,
.navbar-default .navbar-nav > .show > a:hover {
  color: #fff;
}
/*==========Sub Menu=v==========*/
@media screen and (min-width: 992px) {
  .mainmenu .collapse ul > li:hover > a {
    background: #d61a5e;
  }
  .mainmenu .collapse ul ul > li:hover > a,
  .navbar-default .navbar-nav .show .dropdown-menu > li > a:focus,
  .navbar-default .navbar-nav .show .dropdown-menu > li > a:hover {
    background: #d61a5e;
  }
  .mainmenu .collapse ul ul ul > li:hover > a {
    background: #4caf50;
  }
}

.mainmenu .collapse ul ul,
.mainmenu .collapse ul ul.dropdown-menu {
  background: #1565c0;
}
.mainmenu .collapse ul ul ul,
.mainmenu .collapse ul ul ul.dropdown-menu {
  background: #1e88e5;
}
.mainmenu .collapse ul ul ul ul,
.mainmenu .collapse ul ul ul ul.dropdown-menu {
  background: #64b5f6;
}

/******************************Drop-down menu work on hover**********************************/
.mainmenu {
  background: none;
  border: 0 solid;
  margin: 0;
  padding: 0;
  min-height: 20px;
  width: 100%;
}
@media only screen and (min-width: 992px) {
  .mainmenu .collapse ul li:hover > ul {
    display: block;
  }
  .mainmenu .collapse ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    display: none;
  }
  /*******/
  .mainmenu .collapse ul ul li {
    position: relative;
  }
  .mainmenu .collapse ul ul li:hover > ul {
    display: block;
  }
  .mainmenu .collapse ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 250px;
    display: none;
  }
  /*******/
  .mainmenu .collapse ul ul ul li {
    position: relative;
  }
  .mainmenu .collapse ul ul ul li:hover ul {
    display: block;
  }
  .mainmenu .collapse ul ul ul ul {
    position: absolute;
    top: 0;
    left: -100%;
    min-width: 250px;
    display: none;
    z-index: 1;
  }
}
@media only screen and (max-width: 991px) {
  .navbar-nav .show .dropdown-menu .dropdown-menu > li > a {
    padding: 16px 15px 16px 35px;
  }
  .navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a {
    padding: 16px 15px 16px 45px;
  }
  .navbar-nav .dropdown .dropdown-toggle::after {
    content: "+" !important;
    font-size: 20px;
    vertical-align: 0;
    top: 8px;
    border: 1px solid #fff;
    right: 40px;
    width: 32px;
    height: 32px;
    text-align: center;
    position: absolute;
  }
  .navbar-nav .dropdown .dropdown-Opened::after {
    content: "-" !important;
  }
  div#navbarSupportedContent {
    position: absolute;
    width: 100%;
    z-index: 1;
    top: 56px;
    left: 0;
    background: #0062cc;
  }
  /*Slide from left
   .navbar-collapse {
    position: fixed;
    top: 56px;
    left: 0;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    width: 75%;
    background-color: #1e88e5;
    height: 100%;
  }
  .navbar-collapse.collapsing {
    left: -75%;
    transition: height 0s ease;
  }

  .navbar-collapse.show {
    left: 0;
    transition: left 300ms ease-in-out;
  }

  .navbar-toggler.collapsed ~ .navbar-collapse {
    transition: left 500ms ease-in-out;
  }
  */
}

header {
  position: fixed;
  width: 100%;
  z-index: 2;
}

#banner {
  background: url("../img/banner.png") no-repeat;
  background-size: cover;
  height: 600px;
}
#banner h1 {
  color: #fff;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<header id="menu_area" class="menu-area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav class="navbar navbar-expand-lg navbar-light mainmenu">
                        <div class="container-fluid">
                            <div class="logo">
                                    <a class="navbar-brand" href="index.html">
                                        LOGO
                                    </a>
                            </div>                    
                          <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 class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav ms-lg-auto customNav">
                              <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Home</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                              </li>
                              <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle firstLevel" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                  Main Dropdown
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                  <li><a class="dropdown-item" href="#">Action</a></li>
                                  <li><a class="dropdown-item" href="#">Another action</a></li>
                                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                                  <li class="dropdown">
                                    <a class="dropdown-toggle subLevel" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sub Dropdown1</a>
                                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="dropdown">
                                        <a class="dropdown-toggle subLevel" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sub Dropdown2</a>
                                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                        </ul>
                                    </li>
                                    </ul>
                                </li>
                                </ul>
                              </li>  
                              <li class="nav-item">
                                <a class="nav-link" href="#">Service</a>
                              </li>
                              <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle firstLevel " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                  Main Dropdown2
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                  <li><a class="dropdown-item" href="#">Action</a></li>
                                  <li><a class="dropdown-item" href="#">Another action</a></li>
                                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                                </ul>
                              </li>  
                            </ul>
                          </div>
                        </div>
                      </nav>
                </div>
            </div>
        </div>
       
    </header>

    <main>
        <section id="banner">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12">
                    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae sit dignissimos totam dolore corporis! </h1>
            </div>
        </div>
        </section>
    </main>

Answer 1

更新 css 中的以下样式。

div#navbarSupportedContent {
    position: absolute;
    width: 100%;
    z-index: 1;
    top: 56px;
    left: 0;
    background: #0062cc;
    overflow: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 56px);
}

Answer 2

在 Bootstrap 5 中，有一个 CSS 类 navbar-nav-scroll 来处理滚动行为。在您的代码中尝试一下：

<ul class="navbar-nav ms-lg-auto customNav navbar-nav-scroll">

此外，您可以使用 style="--bs-scroll-height: 100px;" 调整滚动长度，因此它会像

<ul class="navbar-nav ms-lg-auto customNav navbar-nav-scroll" style="--bs-scroll-height: 100px;">

引导文档