带有可折叠列表的叠加菜单在单击时消失

Question

我正在为我的网站使用叠加菜单。我还在菜单上应用了一些可折叠功能来显示子菜单。我的问题是，当我单击主菜单以显示子菜单时，整个覆盖菜单都消失了。我无法弄清楚我们的问题。我正在使用 Bootstrap 4.1.0.

请帮忙！

这是我的代码...

// Menu Overlay
$(document).ready(function() {
  $("#nav-icon").click(function() {
    $(this).toggleClass("animate-icon"), $("#overlay").fadeToggle()
  })
}), $(document).ready(function() {
  $("#overlay").click(function() {
    $("#nav-icon").removeClass("animate-icon"), $("#overlay").toggle()
  })
});

// Show Sub Menu
var coll = document.getElementsByClassName("subMenu");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

#nav-icon {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 28px;
  z-index: 10;
  cursor: pointer;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#nav-icon span {
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  background-color: #be9bba;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2) {
  top: 10px;
}

#nav-icon span:nth-child(3) {
  top: 20px;
}

#nav-icon.animate-icon span:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon.animate-icon span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon.animate-icon span:nth-child(3) {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Overlay positioning */
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  width: 100%;
  padding-top: 100px;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}

#overlay ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#overlay ul li {
  padding: 10px 0;
}

#overlay ul li a {
  color: #fff;
  font-size: 200%;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-family: 'Yanone Kaffeesatz', sans-serif;
}

#overlay ul li a:hover {
  color: #ccc;
  text-decoration: none;
}

.subMenu-content {
  max-height: 0;
  font-size: 11px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav-icon">
  <span></span>
  <span></span>
  <span></span>
</div>
<div id="overlay" class="text-center">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#" class="subMenu">Menu 2 &raquo;</a>
      <ul class="subMenu-content">
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

Answer 1

您需要为覆盖删除onClick JS 函数，这将解决问题。理想情况下，除非有人点击关闭按钮，否则您不想关闭菜单

// Menu Overlay $(document).ready(function(){ $("#nav-icon").click(function(){ $(this).toggleClass("animate-icon") $("#overlay").fadeToggle() }) }); // Show Sub Menu var coll = document.getElementsByClassName("subMenu"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); }

#nav-icon { position: absolute; top: 30px; right: 30px; width: 30px; height: 28px; z-index: 10; cursor: pointer; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } #nav-icon span { position: absolute; display: block; width: 100%; height: 4px; background-color: #be9bba; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; } #nav-icon span:nth-child(1) { top: 0px; } #nav-icon span:nth-child(2) { top: 10px; } #nav-icon span:nth-child(3) { top: 20px; } #nav-icon.animate-icon span:nth-child(1) { top: 10px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } #nav-icon.animate-icon span:nth-child(2) { opacity: 0; left: -60px; } #nav-icon.animate-icon span:nth-child(3) { top: 10px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } #overlay { display: -webkit-box; display: -ms-flexbox; display: flex; /* Overlay positioning */ display: none; position: absolute; left: 0; top: 0; z-index: 8; width: 100%; padding-top: 100px; height: 100%; background: rgba(0, 0, 0, 0.9); } #overlay ul { margin: 0; padding: 0; list-style: none; } #overlay ul li { padding: 10px 0; } #overlay ul li a { color: #fff; font-size: 200%; letter-spacing: 5px; text-transform: uppercase; font-family: 'Yanone Kaffeesatz', sans-serif; } #overlay ul li a:hover { color: #ccc; text-decoration: none; } .subMenu-content { max-height: 0; font-size: 11px; overflow: hidden; transition: max-height 0.2s ease-out; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="nav-icon"> <span></span> <span></span> <span></span> </div> <div id="overlay" class="text-center"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#" class="subMenu">Menu 2 »</a> <ul class="subMenu-content"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

带有可折叠列表的叠加菜单在单击时消失

Overlay menu with collapsible list disappears onclick

css

menu

collapsable

overlays

submenu