javascript - JS逻辑: Open/close menu on click or replace with another

Question

我有一个菜单，点击后会打开一个子菜单。

如果链接有一个下拉菜单(具有类header--has-submenu)，则单击时，我将显示另一个元素(.header__subContainer) .

我遇到的问题是逻辑问题。例如，在我的演示中，我有两个链接，我们提供什么和关于我们，两者都有子菜单。

我希望用户能够单击链接将其打开，然后单击同一链接将其关闭(标准用户体验)。

但是，我还希望用户能够单击一个链接(比方说“我们提供什么”)，然后单击关于我们以显示菜单下拉菜单(然后是用户可以再次单击关于我们`链接来关闭菜单)。

我尝试过 toggleClass 但这会导致上面最后一个场景出现问题。

这是一个演示:

  $(".header--has-submenu a.header__parentLink").click(function(e) {
    e.preventDefault();
    
    console.log("click");

    var id = $(this).attr('data-menu');

    // add active state styles to link to showcase which menu is open
    $("li.header--has-submenu").removeClass("header--has-submenu--active");
    $(this).parent().addClass("header--has-submenu--active");


    // open subContainer (black div that contains all submenus)
    if ( $(".header__subContainer-menu").hasClass("header__subContainer-menu--active") ){
      $(".header__subContainer").removeClass("header__subContainer--active");
    } else {
      $(".header__subContainer").addClass("header__subContainer--active");
    }


    // remove active class from submenu, so only one menu is open at one time
    $(".header__subContainer-menu").removeClass("header__subContainer-menu--active");

    // open the relevant menu
    $(this).closest(".header__subContainer").addClass("header__subContainer--active");
    $(".header__subContainer-menu[data-menu='"+id+"']").toggleClass("header__subContainer-menu--active");

  });

.header {
  padding: 30px 0;
}
.header__parentUl * {
  color: #FFFFFF;
}
.header__li {
  margin: 0 20px;
}
.header__subContainer {
  display: none;
}
.header__subContainer--active {
  display: block;
}
.header__subContainer-menu {
  display: none;
}
.header__subContainer-menu--active {
  display: block;
}
.header--has-submenu--active a {
  color: green;
}

.background--black {
  background: #000000;
}

.reset-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.color--white {
  color: #FFFFFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8dad7d7cccbcccad9c8f88d9688968a" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header class="header background--black">

  <div class="container">
    <div class="col-xl-9 justify-content-end">
      <nav class="header__menu">
        <ul class="header__parentUl d-flex reset-list">

          <li class="header__li header--has-submenu">
            <a class="header__parentLink" href="#" data-menu="what-we-deliver">What we deliver</a>
          </li>

          <li class="header__li header--has-submenu">
            <a class="header__parentLink" href="#" data-menu="about-us">About us</a>
          </li>

        </ul>
      </nav>
    </div>
  </div>

  <div class="container-fluid background--black header__subContainer">
    <div class="row justify-content-center">
      <div class="col-12">

        <nav class="header__subContainer-menu" data-menu="what-we-deliver">
          <ul class="header__subContainer-ul d-flex reset-list">
            <li class="header__subContainer-li">
              <a class="header__subContainer-link color--white " href="#">Link 1</a>
            </li>
            <li class="header__subContainer-li">
              <a class="header__subContainer-link color--white " href="#">Link 2</a>
            </li>
          </ul>
        </nav>

        <nav class="header__subContainer-menu" data-menu="about-us">
          <ul class="header__subContainer-ul d-flex reset-list">
            <li class="header__subContainer-li">
              <a class="header__subContainer-link color--white " href="#">Link 3</a>
            </li>
            <li class="header__subContainer-li">
              <a class="header__subContainer-link color--white " href="#">Link 4</a>
            </li>
          </ul>
        </nav>

      </div>
    </div>
  </div>

</header>

Answer 1

这样的事情应该有效:

$(".header--has-submenu a.header__parentLink").click(function(e) {
  e.preventDefault();

  let id = $(this).attr('data-menu');
  
  // Check if link already active
  let wasOpen = $(this).parent().hasClass("header--has-submenu--active");

  // remove all active classes
  $(".header--has-submenu").removeClass("header--has-submenu--active");
  $(".header__subContainer-menu").removeClass("header__subContainer-menu--active");
  $(".header__subContainer").removeClass("header__subContainer--active");

  if(!wasOpen){
    // the clicked link was not open
    // add active classes to the 3 elements
    
    $(this).parent().addClass("header--has-submenu--active");
    $('.header__subContainer').addClass('header__subContainer--active');
    $(".header__subContainer-menu[data-menu='"+id+"']").addClass("header__subContainer-menu--active");

  }
});