Das Ein-/Ausblenden (Umschalten) von Untermenüs des Navigationsmenüs mithilfe von JQuery funktioniert nicht wie erwartet
P粉183077097
P粉183077097 2024-03-20 09:28:35
0
1
503

Ich habe ein horizontales Menü mit CSS, HTML und JQuery erstellt. Wenn jemand auf einen Menüpunkt klickt, wird ein Untermenü angezeigt.

Mein Problem ist, dass, wenn das Untermenü bereits geöffnet ist und ich auf einen anderen Menüpunkt klicke, das neue Untermenü angezeigt wird, das zuvor geöffnete Menü jedoch nicht ausgeblendet wird.

Update: Ich habe die Frage so bearbeitet, dass sie sich jetzt nur noch auf ein Problem konzentriert.

$(".menus_li").click(function(e) {
  $(".blocks_ul", this).toggleClass('submenu-is-active');
});
a {
  color: #fff;
  text-decoration: none;
}

li {
  list-style: none;
}

.top-menu {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  width: 100%;
  background: #0088ff;
  padding: 1rem;
  margin: 0;
}

.menus_li {
  font-weight: bold;
  margin-left: 1rem;
}

.blocks_ul {
  display: none;
  position: absolute;
  background: #fff;
  top: 100%;
  min-width: 120px;
  border-radius: 8px;
  padding: 1rem;
}

.blocks_ul a {
  color: #000;
}

.blocks_ul li {
  padding-left: 10px;
  font-weight: normal;
  padding: 0.4rem 0.7rem;
}

.blocks_ul.submenu-is-active {
  display: block;
}

.bg_submenu {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}

.bg_submenu.show {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="bg_submenu"></div>
<ul class="top-menu">
  <li class="menus_li"><a href="#">Cars +</a>
    <ul class="blocks_ul">
      <li><a class="menu-link" href="#">Mercedes</a></li>
      <li><a class="menu-link" href="#">Jeep</a></li>
      <li><a class="menu-link" href="#">Ford</a></li>
      <li><a class="menu-link" href="#">BMW</a></li>
      <li><a class="menu-link" href="#">Tesla</a></li>
    </ul>
  </li>
  <li class="menus_li"><a href="#">Computers +</a>
    <ul class="blocks_ul">
      <li><a class="menu-link" href="#">Apple</a></li>
      <li><a class="menu-link" href="#">Lenovo</a></li>
      <li><a class="menu-link" href="#">HP</a></li>
      <li><a class="menu-link" href="#">Dell</a></li>
      <li><a class="menu-link" href="#">Acer</a></li>
    </ul>
  </li>
</ul>

P粉183077097
P粉183077097

Antworte allen(1)
P粉663883862

您可以按如下方式更改代码(代码中的注释)

const $blocks = $(".blocks_ul");       // get all blocks
const $background = $(".bg_submenu");  // get background

$(".menus_li").on('click', e => {
  const $thisBlock = $(".blocks_ul", e.currentTarget);      // get current block

  $blocks.not($thisBlock).removeClass('submenu-is-active'); // remove class from other blocks
  $thisBlock.toggleClass('submenu-is-active');              // toggle the class on the current block
  $background.toggleClass('show', $thisBlock.hasClass('submenu-is-active')); // only show the background if you are showing the block
});

$('body').on('click', e => {
  const $clicked = $(e.target);  // get the target that was clicked
  
  // check if the click originated in the menu
  if (!$clicked.hasClass('menus_li') && !$clicked.closest('.menus_li').length) {
    // if not do the following
    $blocks.removeClass('submenu-is-active'); // hide menu
    $background.removeClass('show'); // hide background
  }
})
a {
  color: #fff;
  text-decoration: none;
}

li {
  list-style: none;
}

.top-menu {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  width: 100%;
  background: #0088ff;
  padding: 1rem;
  margin: 0;
}

.menus_li {
  font-weight: bold;
  margin-left: 1rem;
}

.blocks_ul {
  display: none;
  position: absolute;
  background: #fff;
  top: 100%;
  min-width: 120px;
  border-radius: 8px;
  padding: 1rem;
}

.blocks_ul a {
  color: #000;
}

.blocks_ul li {
  padding-left: 10px;
  font-weight: normal;
  padding: 0.4rem 0.7rem;
}

.blocks_ul.submenu-is-active {
  display: block;
}

.bg_submenu {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}

.bg_submenu.show {
  display: block;
}


Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage