Tapping on the Child Component will automatically close the currently opened list

Question

Tapping on the Child Component will automatically close the currently opened list

Recently, I created a menu that expands to show all child elements when clicking on the parent menu link. However, I encountered an issue where clicking on a child element collapses the menu. You can view a demo of my implementation here: http://codepen.io/anon/pen/KzpKrm. My goal is to have the list expand and indicate the selected link when clicking on a child element. If anyone has a solution, please help me out!

  function showmenu(elem) {
        // Clear any currently open menu
        var openMenu = document.getElementById("activeMenu");
        if (openMenu) {
            openMenu.removeAttribute("id");
            // Stop if we're just closing the current menu
            if (openMenu === elem) {
                return;
            }
        }

        // Only apply it if the element actually has LI child nodes.
        // OPTIONAL: Will still work without if statement.
        if (elem.getElementsByTagName("li").length > 0) {
            elem.setAttribute("id", "activeMenu");
        }
    }

javascript html css

Answer 1

Answer №1

If you want to prevent bubbling, simply include event.stopPropagation() within the nested ul:

<ul id="nav">
    <li onclick="showmenu(this)" class="sectionMenu">
        Service
        <ul onclick="event.stopPropagation()">
            <li><a> Ro </a>    </li>
            <li> <a>List</a> </li>
            <li><a>Service Plan</a> </li>
        </ul>
    </li>
    ....
</ul>

Answer 2

If you want to prevent bubbling, simply include event.stopPropagation() within the nested ul:

<ul id="nav">
    <li onclick="showmenu(this)" class="sectionMenu">
        Service
        <ul onclick="event.stopPropagation()">
            <li><a> Ro </a>    </li>
            <li> <a>List</a> </li>
            <li><a>Service Plan</a> </li>
        </ul>
    </li>
    ....
</ul>

Answer 3

Answer №2

To determine if the element clicked is a parent (having the class sectionMenu), you can implement the following JavaScript logic:

// Check if the element clicked has the class 'sectionMenu'. If not, exit.
var $elementClicked = event.target;
if ($elementClicked.className !== 'sectionMenu') {
  return;
}

CodePen

function showmenu(elem) {

    // Check if the element clicked has the class 'sectionMenu'. If not, exit.
    var $elementClicked = event.target;
    if ($elementClicked.className !== 'sectionMenu') {
      return;
    }
  
    // Clear any currently open menu
    var openMenu = document.getElementById("activeMenu");
    if (openMenu) {
      openMenu.removeAttribute("id");
      // Stop if we're just closing the current menu
      if (openMenu === elem) {
        return;
      }
    }

    // Apply only if the element actually has LI child nodes.
    // OPTIONAL: Will still work without this if statement.
    if (elem.getElementsByTagName("li").length > 0) {
      elem.setAttribute("id", "activeMenu");
    }
  }

img {
         padding-left: 5px;
       }
       #nav {
         height: 100%;
         padding: 20px;
         cursor: pointer;
         border: 3px solid #3e4547;
         box-shadow: 2px 2px 8px #000000;
         border-radius: 3px;
         -moz-border-radius: 3px;
         -webkit-border-radius: 3px;
       }
       ul {
         width: 200px;
         list-style: none;
         margin: 0;
         padding: 5px;
       }
       ul li {
         display: block;
         padding: 0 10px;
         overflow: hidden;
         padding: 5px;
       }
       ul ul {
         display: none;
       }
       ul ul li {
         float: none;
         user-select: #b6ff00;
       }
       #activeMenu ul {
         display: block;
       }
       ul li:hover {
         background-color: #bcbdc1;
       }
       ul ul li:hover {
         background-color: red;
       }
       .arrow {
         background-image: url("./png/2.png");
         transition: 0.3s;
         transform: rotateX(-180deg);
       }
       li.sectionMenu:before {
         content: '\2795';
         font-size: 13px;
         color: #777;
         float: right;
         margin-left: 5px;
       }
       li.sectionMenu#activeMenu:before {
         content: "\2796";
       }

<div>
  <ul id="nav">
    <li onclick="showmenu(this)" class="sectionMenu">
      Service
      <ul>
        <li><a> Ro </a> 
        </li>
        <li> <a>List</a> 
        </li>
        <li><a>Service Plan</a> 
        </li>

      </ul>
    </li>
    <li onclick="showmenu(this)" class="sectionMenu">
      Customer
      <ul>
        <li>New Customer</li>
        <li>customer List</li>

      </ul>
    </li>
    <li onclick="showmenu(this)" class="sectionMenu">
      Parts
      <ul>
        <li>New Part</li>
        <li>Parts List</li>

      </ul>
    </li>
    <li onclick="showmenu(this)" class="sectionMenu">
      Admin
      <ul>
        <li>New Employee</li>
        <li>Employee List</li>
        <li>Employee Roles</li>
        <li>Employee Work Schedulee</li>
        <li>Holidays</li>

        <li>Employee List</li>

      </ul>
    </li>
  </ul>
</div>

Answer 4

To determine if the element clicked is a parent (having the class sectionMenu), you can implement the following JavaScript logic:

// Check if the element clicked has the class 'sectionMenu'. If not, exit.
var $elementClicked = event.target;
if ($elementClicked.className !== 'sectionMenu') {
  return;
}

CodePen

function showmenu(elem) {

    // Check if the element clicked has the class 'sectionMenu'. If not, exit.
    var $elementClicked = event.target;
    if ($elementClicked.className !== 'sectionMenu') {
      return;
    }
  
    // Clear any currently open menu
    var openMenu = document.getElementById("activeMenu");
    if (openMenu) {
      openMenu.removeAttribute("id");
      // Stop if we're just closing the current menu
      if (openMenu === elem) {
        return;
      }
    }

    // Apply only if the element actually has LI child nodes.
    // OPTIONAL: Will still work without this if statement.
    if (elem.getElementsByTagName("li").length > 0) {
      elem.setAttribute("id", "activeMenu");
    }
  }

img {
         padding-left: 5px;
       }
       #nav {
         height: 100%;
         padding: 20px;
         cursor: pointer;
         border: 3px solid #3e4547;
         box-shadow: 2px 2px 8px #000000;
         border-radius: 3px;
         -moz-border-radius: 3px;
         -webkit-border-radius: 3px;
       }
       ul {
         width: 200px;
         list-style: none;
         margin: 0;
         padding: 5px;
       }
       ul li {
         display: block;
         padding: 0 10px;
         overflow: hidden;
         padding: 5px;
       }
       ul ul {
         display: none;
       }
       ul ul li {
         float: none;
         user-select: #b6ff00;
       }
       #activeMenu ul {
         display: block;
       }
       ul li:hover {
         background-color: #bcbdc1;
       }
       ul ul li:hover {
         background-color: red;
       }
       .arrow {
         background-image: url("./png/2.png");
         transition: 0.3s;
         transform: rotateX(-180deg);
       }
       li.sectionMenu:before {
         content: '\2795';
         font-size: 13px;
         color: #777;
         float: right;
         margin-left: 5px;
       }
       li.sectionMenu#activeMenu:before {
         content: "\2796";
       }

<div>
  <ul id="nav">
    <li onclick="showmenu(this)" class="sectionMenu">
      Service
      <ul>
        <li><a> Ro </a> 
        </li>
        <li> <a>List</a> 
        </li>
        <li><a>Service Plan</a> 
        </li>

      </ul>
    </li>
    <li onclick="showmenu(this)" class="sectionMenu">
      Customer
      <ul>
        <li>New Customer</li>
        <li>customer List</li>

      </ul>
    </li>
    <li onclick="showmenu(this)" class="sectionMenu">
      Parts
      <ul>
        <li>New Part</li>
        <li>Parts List</li>

      </ul>
    </li>
    <li onclick="showmenu(this)" class="sectionMenu">
      Admin
      <ul>
        <li>New Employee</li>
        <li>Employee List</li>
        <li>Employee Roles</li>
        <li>Employee Work Schedulee</li>
        <li>Holidays</li>

        <li>Employee List</li>

      </ul>
    </li>
  </ul>
</div>

Answer 5

Answer №3

Give it a shot. Don't forget to include the event argument for the onclick handlers

function displayMenu(element, event) {
        // Clear any currently open menu
        event.preventDefault();
        // alert(event.currentTarget.getAttribute("id"))
        var currentMenu = document.getElementById("activeMenu");

        if (currentMenu) {
            if(currentMenu.children[0]==event.target.parentNode)
              return;
            currentMenu.removeAttribute("id");
            // Stop if we're just closing the current menu
            if (currentMenu === element) {
                return;
            }
        }

        // Only apply it if the element actually has LI child nodes.
        // OPTIONAL: Will still work without if statement.
        if (element.getElementsByTagName("li").length > 0) {   
          event.currentTarget.setAttribute("id", "activeMenu");
        }
    }

CodePen

Answer 6

Give it a shot. Don't forget to include the event argument for the onclick handlers

function displayMenu(element, event) {
        // Clear any currently open menu
        event.preventDefault();
        // alert(event.currentTarget.getAttribute("id"))
        var currentMenu = document.getElementById("activeMenu");

        if (currentMenu) {
            if(currentMenu.children[0]==event.target.parentNode)
              return;
            currentMenu.removeAttribute("id");
            // Stop if we're just closing the current menu
            if (currentMenu === element) {
                return;
            }
        }

        // Only apply it if the element actually has LI child nodes.
        // OPTIONAL: Will still work without if statement.
        if (element.getElementsByTagName("li").length > 0) {   
          event.currentTarget.setAttribute("id", "activeMenu");
        }
    }

CodePen

Tapping on the Child Component will automatically close the currently opened list

Answer №1

Answer №2

Answer №3

Similar questions

Ajax dropdown menu displaying 'Loading Data' message during processing

Design a section with a blue background for better form organization

Can the coordinates in an array be constrained within a specific radius?

The sequence of execution in php compared to POST method in HTML

Incorporating and designing a side button using jQuery Mobile

Guide to writing a Jasmine test case to verify Toggle class behavior within a click event

Unlimited digest loop in Angular.js caused by nested ng-repeat and filter

Encountering issues with React Apollo hooks after integrating React Native into the monorepo system

How can I deactivate Bootstrap specifically within a certain block of content?

Disable system discord.js

Is there a way to compare timestamps in PostgreSQL using moment.js and focus only on the date aspect?

Creating a fading effect on an image in relation to another dynamic image

What is the best way to place multiple images on top of one another within a single div, and make them break apart with animation upon hovering?

What is the proper way to connect an external Javascript file to an html document within a Play Framework project?

Angular: Navigating to another URL causes the page to revert back to the default route

Attempting to develop a straightforward JavaScript presentation display

Creating dynamic data for Chart.js to display values

Prevent incomplete date input in Html5 date input field

Discovering all the links present on a webpage using node.js

Script - Retrieve the content of the code element