JS邏輯：單擊時打開/關閉選單或替換為另一個

我有一個選單，點擊后會打開一個子選單。

如果一個鏈接有一個下拉選單（有 class header--has-submenu），那么在點擊時，我正在制作另一個元素 ( .header__subContainer) 出現。

我遇到的問題是邏輯問題。例如，在我的演示中，我有兩個鏈接，what we deliver并且about us都有子選單。

我希望用戶能夠單擊鏈接將其打開，然后單擊同一鏈接將其關閉（標準 UX）。

但是，我還希望用戶能夠單擊一個鏈接（讓我們再次說“我們提供的) and then click onto 關于我們to show that menus dropdown (then the user can click the的內容”鏈接以關閉選單）。

我已經嘗試過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/[email protected]/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>

uj5u.com熱心網友回復：

像這樣的東西應該作業：

$(".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");

  }
});

標籤：javascript html jQuery css

上一篇：為Bootstrap3折疊面板添加單獨的按鈕操作

下一篇：為什么我的JQuery工具提示無法正常作業？