Thursday

Sub menu accordion closes when it should open (nested accordion logic seems off)

4:14 PM css, html, javascript, jquery No comments

Issue

I have a multi-nested accordion menu is currently behaving glitchy.

When I'm clicking into a submenu (i.e. "what we deliver 2", it closes the main accordion and then when I open the main accordion, that's when the sub accordion opens. See this gif for a demo of my issue:

I'm trying to simply open and close each accordion on it's li click, but unsure why it closes the entire parent accordion and then appears once the parent accordion opens (it's the same behaviour when closing the sub accordions, as shown in the gif).

Demo:

$(function() {

  /*
  * define vars
  */

  const header = $(".header");
  const hamburger_trigger = $(".hamburger__trigger");
  const hamburger_popup = $(".hamburger__popup");

  /*
  * open hamburger on click
  */

  $(hamburger_trigger).click(function(e) {
    e.preventDefault();
    $(header).toggleClass("hamburger--open");
    $(hamburger_popup).toggleClass("active");
  });


  /*
  * hamburger submenu
  */

  $(".hamburger--has-submenu").click(function() {

    console.log("click");

    var child_menu = $(this).children(".hamburger__submenu");

    if ($(this).hasClass("hamburger__submenu--open")) {
      $(this).removeClass("hamburger__submenu--open");
      child_menu.removeClass("d-block");
    } else {
      $(this).addClass("hamburger__submenu--open");
      child_menu.addClass("d-block");

    }

  });


  // for children submenus

  $(".hamburger-trigger-submenu").click(function() {
    console.log("click");

    var child_menu = $(this).children(".hamburger__submenu");

    if ($(this).hasClass("hamburger__submenu--open")) {
      child_menu.removeClass("hamburger__submenu--open");
    } else {
      child_menu.addClass("hamburger__submenu--open");
    }

  });



});

/* HEADER */
.header {
  padding: 30px 0;
}

/* HAMBURGER */
.hamburger__trigger {
  cursor: pointer;
}
.hamburger__trigger:hover {
  color: green;
}
.hamburger__popup {
  background: black;
  visibility: hidden;
  display: none;
  height: 0;
  padding: 40px 15px 140px 15px;
  overflow-y: scroll;
}
.hamburger__popup.active {
  visibility: visible;
  -webkit-animation: fadeIn 0.3s;
  animation: fadeIn 0.3s;
  display: block;
  position: absolute;
  left: 0;
  top: 100px;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}
.hamburger__popup-inner {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  overflow: auto;
  flex-grow: 1;
}
.hamburger__li > a {
  margin: 10px 0;
  display: block;
  text-decoration: none !important;
}
.hamburger__submenu--level-2, .hamburger__submenu--level-3, .hamburger__submenu--level-4 {
  display: none;
  padding-left: 10px;
}

/* GENERAL */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

.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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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

  <div class="container">
    <div class="row justify-content-end">
      <div class="col-4">
        <div class="hamburger">
          <span class="hamburger__trigger color--white">Click me</span>
        </div>
      </div>
    </div>
  </div>

  <div class="hamburger__popup">
    <div class="hamburger__popup-inner color--white">
      <nav class="hamburger__menu w-100">
        <ul class="hamburger__menu-ul">

          <!-- MAIN GROUP -->
          <li class="hamburger__li hamburger__depth-1 hamburger--has-submenu ">
            <a class="hamburger__parent-item color--white" href="#">
              What we deliver
            </a>

            <!-- SUB MENU IN MAIN GROUP -->
            <ul class="hamburger__submenu hamburger__submenu--level-2">

              <li class="hamburger__li hamburger__depth-2 hamburger--has-submenu hamburger-trigger-submenu">
                <a class="hamburger__link color--white hamburger__submenu-trigger" href="#">
                  <span>What we deliver 2</span>
                </a>
                <!-- SUB MENU WITHIN SUBMENU -->
                <ul class="hamburger__submenu hamburger__submenu--level-3">
                  <li class="hamburger__li hamburger__depth-3  hamburger-trigger-submenu">
                    <a class="hamburger__link color--white position-relative" href="#">
                      What we deliver 2.1
                    </a>
                  </li>
                </ul>
                <!-- SUB MENU WITHIN SUBMENU END-->
              </li>

              <li class="hamburger__li hamburger__depth-2 hamburger--has-submenu hamburger-trigger-submenu">
                <a class="hamburger__link color--white hamburger__submenu-trigger" href="#">
                  <span>What we deliver 3</span>
                </a>
                <!-- SUB MENU WITHIN SUBMENU -->
                <ul class="hamburger__submenu hamburger__submenu--level-3">
                  <li class="hamburger__li hamburger__depth-3  hamburger-trigger-submenu">
                    <a class="hamburger__link color--white position-relative" href="#">
                      What we deliver 3.1
                    </a>
                  </li>
                </ul>
                <!-- SUB MENU WITHIN SUBMENU END-->
              </li>


            </ul>
            <!-- SUB MENU IN MAIN GROUP END -->


          </li>
          <!-- MAIN GROUP END -->


        </ul>

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

</header>

Solution

You need to add e.stopPropagation(); (docs) within the $(".hamburger-trigger-submenu").click(...) handler to prevent the event from bubbling up to $(".hamburger--has-submenu").click(...).

Full Code:

$(function() {

  /*
  * define vars
  */

  const header = $(".header");
  const hamburger_trigger = $(".hamburger__trigger");
  const hamburger_popup = $(".hamburger__popup");

  /*
  * open hamburger on click
  */

  $(hamburger_trigger).click(function(e) {
    e.preventDefault();
    $(header).toggleClass("hamburger--open");
    $(hamburger_popup).toggleClass("active");
  });


  /*
  * hamburger submenu
  */

  $(".hamburger--has-submenu").click(function() {

    console.log("click");

    var child_menu = $(this).children(".hamburger__submenu");

    if ($(this).hasClass("hamburger__submenu--open")) {
      $(this).removeClass("hamburger__submenu--open");
      child_menu.removeClass("d-block");
    } else {
      $(this).addClass("hamburger__submenu--open");
      child_menu.addClass("d-block");

    }

  });


  // for children submenus

  $(".hamburger-trigger-submenu").click(function(e) {
    console.log("click");
    
    e.stopPropagation();
    
    var child_menu = $(this).children(".hamburger__submenu");

    if ($(this).hasClass("hamburger__submenu--open")) {
      child_menu.removeClass("hamburger__submenu--open");
    } else {
      child_menu.addClass("hamburger__submenu--open");
    }

  });



});

/* HEADER */
.header {
  padding: 30px 0;
}

/* HAMBURGER */
.hamburger__trigger {
  cursor: pointer;
}
.hamburger__trigger:hover {
  color: green;
}
.hamburger__popup {
  background: black;
  visibility: hidden;
  display: none;
  height: 0;
  padding: 40px 15px 140px 15px;
  overflow-y: scroll;
}
.hamburger__popup.active {
  visibility: visible;
  -webkit-animation: fadeIn 0.3s;
  animation: fadeIn 0.3s;
  display: block;
  position: absolute;
  left: 0;
  top: 100px;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}
.hamburger__popup-inner {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  overflow: auto;
  flex-grow: 1;
}
.hamburger__li > a {
  margin: 10px 0;
  display: block;
  text-decoration: none !important;
}
.hamburger__submenu--level-2, .hamburger__submenu--level-3, .hamburger__submenu--level-4 {
  display: none;
  padding-left: 10px;
}

/* GENERAL */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

.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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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

  <div class="container">
    <div class="row justify-content-end">
      <div class="col-4">
        <div class="hamburger">
          <span class="hamburger__trigger color--white">Click me</span>
        </div>
      </div>
    </div>
  </div>

  <div class="hamburger__popup">
    <div class="hamburger__popup-inner color--white">
      <nav class="hamburger__menu w-100">
        <ul class="hamburger__menu-ul">

          <!-- MAIN GROUP -->
          <li class="hamburger__li hamburger__depth-1 hamburger--has-submenu ">
            <a class="hamburger__parent-item color--white" href="#">
              What we deliver
            </a>

            <!-- SUB MENU IN MAIN GROUP -->
            <ul class="hamburger__submenu hamburger__submenu--level-2">

              <li class="hamburger__li hamburger__depth-2 hamburger--has-submenu hamburger-trigger-submenu">
                <a class="hamburger__link color--white hamburger__submenu-trigger" href="#">
                  <span>What we deliver 2</span>
                </a>
                <!-- SUB MENU WITHIN SUBMENU -->
                <ul class="hamburger__submenu hamburger__submenu--level-3">
                  <li class="hamburger__li hamburger__depth-3  hamburger-trigger-submenu">
                    <a class="hamburger__link color--white position-relative" href="#">
                      What we deliver 2.1
                    </a>
                  </li>
                </ul>
                <!-- SUB MENU WITHIN SUBMENU END-->
              </li>

              <li class="hamburger__li hamburger__depth-2 hamburger--has-submenu hamburger-trigger-submenu">
                <a class="hamburger__link color--white hamburger__submenu-trigger" href="#">
                  <span>What we deliver 3</span>
                </a>
                <!-- SUB MENU WITHIN SUBMENU -->
                <ul class="hamburger__submenu hamburger__submenu--level-3">
                  <li class="hamburger__li hamburger__depth-3  hamburger-trigger-submenu">
                    <a class="hamburger__link color--white position-relative" href="#">
                      What we deliver 3.1
                    </a>
                  </li>
                </ul>
                <!-- SUB MENU WITHIN SUBMENU END-->
              </li>


            </ul>
            <!-- SUB MENU IN MAIN GROUP END -->


          </li>
          <!-- MAIN GROUP END -->


        </ul>

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

</header>

Answered By - SuperStormer

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Thursday

Sub menu accordion closes when it should open (nested accordion logic seems off)

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels