Heim  >  Fragen und Antworten  >  Hauptteil

Das Ein-/Ausblenden (Umschalten) von Untermenüs des Navigationsmenüs mithilfe von JQuery funktioniert nicht wie erwartet

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粉183077097P粉183077097235 Tage vor470

Antworte allen(1)Ich werde antworten

  • P粉663883862

    P粉6638838622024-03-21 07:56:08

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

    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;
    }
    
    
    

    Antwort
    0
  • StornierenAntwort