Bootstrap 4.5 防止导航栏菜单下拉菜单在打开另一个菜单时关闭

问题描述 投票：0回答：1

我有一个 Bootstrap 4.5 导航栏菜单，已调整为侧菜单。它工作正常，但是我在菜单中有下拉菜单，当我打开一个下拉菜单时，它会切换关闭另一个已打开的下拉菜单。我想阻止它以允许他们打开多个下拉菜单。

到目前为止我的代码：

    $('a.dropdown-item').on('click', function(e){
     e.stopPropagation();
    });
    
    $('a#navbarDropdown.nav-link.dropdown-toggle').on('click', function(e){
     e.preventDefault();
    });
    
    //sidebar menu
    var fixHeight = function() {
    $('.navbar-nav').css(
      'max-height',
      document.documentElement.clientHeight - 150
    );
      };
      fixHeight();
      $(window).resize(function() {
        fixHeight();
      });
      $('.navbar .navbar-toggler').on('click', function() {
        fixHeight();
      });
      $('.navbar-toggler, .overlay').on('click', function() {
        $('.mobileMenu, .overlay').toggleClass('open');
      });
.sidebar-buttons img {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
}
.sidebar-buttons #pin-button {
  right: 10px;
}
.sidebar-buttons #home-button {
  right: 50px;
}
.sidebar-buttons img:hover, .sidebar-buttons img:focus {
  background: #555;
  color: #fff;
}
input.star-button[type="checkbox"] {
    content: url('assets/brand/star_empty_white.svg');
    appearance: none;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
}
input.star-button[type="checkbox"]:checked {
    content: url('assets/brand/star_filled_white.svg');
}
.navbar {
  height: 50px;
}
.navbar-brand img {
  left: 50px;
  top: 0;
  width: 130px;
}
h1#header-text {
  position: absolute;
  right: 40%;
  width: 190px;
}
.bg-darknavbar {
  background: #15161A !important;
}
.dropdown-menu {
  background-color: transparent;
}
.dropdown-item {
  color: #fff;
  padding: 0;
}
a.nav-link {
  font-family: "Cera-PRO-Bold", Arial Black, Sans-serif !important;
  font-size: 0.9375em;
}
a.dropdown-item {
  font-family: "Cera-PRO-Regular", Arial, Sans-serif !important;
  font-size: 0.75em;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: #fff;
  background-color: transparent;
  text-decoration: underline;
}
.nav-link.dropdown-toggle {
  width: 240px;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
}
.dropdown-toggle::after {
  float: right;
  margin-top: 16px;
}
.navbar-collapse {
  background-color: #15161A !important;
}
.mobileMenu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  position: fixed;
  top: 50px;
  bottom: 0;
  margin: auto;
  left: 0;
  -webkit-transition: all ease 0.25s;
  transition: all ease 0.25s;
  width: 300px;
  background: #2E3138 0% 0% no-repeat padding-box;
  opacity: 92%;
}
.mobileMenu.open {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
.mobileMenu .navbar-nav {
  overflow-y: auto;
  padding-left: 15px;
  padding-top: 50px;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(0, 0, 0, 0);
  display: none;
}
.overlay.open {
  display: block;
  z-index: 1029;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark bg-darknavbar justify-content-sm-spacearound fixed-top"> 
  <button class="navbar-toggler align-self-start" type="button"> <span class="navbar-toggler-icon"></span> </button>
  <a class="navbar-brand" href="#"> LOGO </a>
    <h1 id="header-text" class="text-white cera-pro d-none d-md-block">FLEET OFFICE</h1>
  <div class="collapse navbar-collapse bg-dark p-3 p-lg-0 mt-lg-0 d-flex flex-column flex-lg-row flex-xl-row justify-content-lg-start mobileMenu"
          id="navbarSupportedContent">
    <ul class="navbar-nav align-self-stretch">
      <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
      <li class="nav-item dropdown"> <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"> Contracts </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
            <a class="dropdown-item" href="http://www.google.com">View Contracts <input class="star-button" type="checkbox" /></a>
            <a class="dropdown-item" href="#">Contracts Modifications <input class="star-button" type="checkbox" /></a> 
            <a class="dropdown-item" href="#">Vehicle Lease <input class="star-button" type="checkbox" /></a> 
          </div>
      </li>
      <li class="nav-item dropdown"> <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"> Quote &amp; Order </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
            <a class="dropdown-item" href="#">Quote Requests <input class="star-button" type="checkbox" /></a> 
            <a class="dropdown-item" href="#">Quotes for Review <input class="star-button" type="checkbox" /></a> 
            <a class="dropdown-item" href="#">Vehicles Orders <input class="star-button" type="checkbox" /></a> 
            <a class="dropdown-item" href="#">Release Quotes <input class="star-button" type="checkbox" checked/></a> 
          </div>
      </li>
    </ul>
  </div> 
</nav>
<div class="overlay"></div>

我已经尝试了几天，似乎无法同时打开多个下拉菜单。我确实曾一度设法将它们打开，但随后它们就无法再运行并且无法关闭。非常感谢您的帮助。

javascript html css bootstrap-4 nav
1个回答
0
投票

理想情况下，这将由 Bootstrap 为下拉元素打开和关闭提供的事件完全处理。

我无法发现 

https://getbootstrap.com/docs/4.6/components/dropdowns/#events
在任何地方谈论的 clickEvent 属性，并且 
hide.bs.dropdown
和 
show.bs.dropdown
触发了错误顺序（第一个 
hide
表示因打开另一个元素而关闭的元素，然后 
show
表示确实打开的元素。）

所以我仍然需要在此处的下拉触发链接上使用直接单击处理程序。当它触发时，我们将该元素存储为 

lastTrigger
，然后在 
hide
事件中，我们检查它是否等于事件的 
relatedTarget
。如果是，则意味着您单击了一个链接来显式关闭下拉菜单；如果没有，则意味着下拉菜单正在关闭，因为另一个下拉菜单打开了 - 在这种情况下，我们会阻止事件默认设置。

$('.navbar .navbar-toggler').on('click', function() {
  //fixHeight();
});
$('.navbar-toggler, .overlay').on('click', function() {
  $('.mobileMenu, .overlay').toggleClass('open');
});

let lastTrigger = null;
$('.nav-link.dropdown-toggle').on('click', function() {
  lastTrigger = this;
});

$('.dropdown').on('hide.bs.dropdown', function(e) {
  if (lastTrigger && lastTrigger !== e.relatedTarget) {
    e.preventDefault();
  }
})
.sidebar-buttons img {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
}

.sidebar-buttons #pin-button {
  right: 10px;
}

.sidebar-buttons #home-button {
  right: 50px;
}

.sidebar-buttons img:hover,
.sidebar-buttons img:focus {
  background: #555;
  color: #fff;
}

input.star-button[type="checkbox"] {
  content: url('assets/brand/star_empty_white.svg');
  appearance: none;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 10px;
}

input.star-button[type="checkbox"]:checked {
  content: url('assets/brand/star_filled_white.svg');
}

.navbar {
  height: 50px;
}

.navbar-brand img {
  left: 50px;
  top: 0;
  width: 130px;
}

h1#header-text {
  position: absolute;
  right: 40%;
  width: 190px;
}

.bg-darknavbar {
  background: #15161A !important;
}

.dropdown-menu {
  background-color: transparent;
}

.dropdown-item {
  color: #fff;
  padding: 0;
}

a.nav-link {
  font-family: "Cera-PRO-Bold", Arial Black, Sans-serif !important;
  font-size: 0.9375em;
}

a.dropdown-item {
  font-family: "Cera-PRO-Regular", Arial, Sans-serif !important;
  font-size: 0.75em;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #fff;
  background-color: transparent;
  text-decoration: underline;
}

.nav-link.dropdown-toggle {
  width: 240px;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
}

.dropdown-toggle::after {
  float: right;
  margin-top: 16px;
}

.navbar-collapse {
  background-color: #15161A !important;
}

.mobileMenu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  position: fixed;
  top: 50px;
  bottom: 0;
  margin: auto;
  left: 0;
  -webkit-transition: all ease 0.25s;
  transition: all ease 0.25s;
  width: 300px;
  background: #2E3138 0% 0% no-repeat padding-box;
  opacity: 92%;
}

.mobileMenu.open {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.mobileMenu .navbar-nav {
  overflow-y: auto;
  padding-left: 15px;
  padding-top: 50px;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(0, 0, 0, 0);
  display: none;
}

.overlay.open {
  display: block;
  z-index: 1029;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark bg-darknavbar justify-content-sm-spacearound fixed-top">
  <button class="navbar-toggler align-self-start" type="button"> <span class="navbar-toggler-icon"></span> </button>
  <a class="navbar-brand" href="#"> LOGO </a>
  <h1 id="header-text" class="text-white cera-pro d-none d-md-block">FLEET OFFICE</h1>
  <div class="collapse navbar-collapse bg-dark p-3 p-lg-0 mt-lg-0 d-flex flex-column flex-lg-row flex-xl-row justify-content-lg-start mobileMenu" id="navbarSupportedContent">
    <ul class="navbar-nav align-self-stretch">
      <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Contracts </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="http://www.google.com">View Contracts <input class="star-button" type="checkbox" /></a>
          <a class="dropdown-item" href="#">Contracts Modifications <input class="star-button" type="checkbox" /></a>
          <a class="dropdown-item" href="#">Vehicle Lease <input class="star-button" type="checkbox" /></a>
        </div>
      </li>
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Quote &amp; Order </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Quote Requests <input class="star-button" type="checkbox" /></a>
          <a class="dropdown-item" href="#">Quotes for Review <input class="star-button" type="checkbox" /></a>
          <a class="dropdown-item" href="#">Vehicles Orders <input class="star-button" type="checkbox" /></a>
          <a class="dropdown-item" href="#">Release Quotes <input class="star-button" type="checkbox" checked/></a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<div class="overlay"></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.