Question 54524 in Javascript Question posted in
A very good W3school tutorial can be found here.

Display drop down menu via event listeners – Javascript

I am trying to create a drop down menu in Javascript and would like to display the elements of each UL when a user clicks on the first child.

here is the code i am using to hide/show the UL children

<div class="menu_wrapper">
    <ul class="menu_company">
        <li class="main_item company">Our Company</li>
        <li class="menu_item hide_menu">About US</li>  
        <li class="menu_item hide_menu">Our offices</li>
        <li class="menu_item hide_menu">Careers</li>
    </ul>
    <ul class="products">
        <li class="main_item products">Our Products</li>
        <li class="menu_item hide_menu">Product A</li>  
        <li class="menu_item hide_menu">Product B</li>
        <li class="menu_item hide_menu">Communication</li>
    </ul>
</div>

Here is the function i am using to manage the display/hide of the Ul elements

const hideMenus = document.querySelectorAll('.hide_menu')

const manageMenu = (() => {
    const displayMenus = () => {
        hideMenus.forEach((menu) => {   
            menu.classList.toggle('hide_menu')
        })
    }
})()

and here is how i am creating the eventListener

const mainItem = document.querySelector('.main_item')

mainItem.addEventListener('click', () => {
    manageMenu.displayMenus() 
})

However, when i click on "Our company" or "Our products", all the elements under our company and Products are displayed.

What’s the best way to make the dropdown display elements of the clicked UL only (in JS and not jQuery)?

Thanks

Tags:

2

Answers


  1. 0

    If you’re trying to create a dropdown menu with multiple options, where only the selected option’s submenu is displayed, you can try the following code snippet.

    <div class="menu_wrapper">
  <div class="dropdown">
    <button>Our Company</button>
    <ul class="dropdown-list hide">
      <li>About US</li>
      <li>Our offices</li>
      <li>Careers</li>
    </ul>
  </div>

  <div class="dropdown">
    <button>Our Products</button>
    <ul class="dropdown-list hide">
      <li>Our Products</li>
      <li>Product A</li>
      <li>Product B</li>
      <li>Communication</li>
    </ul>
  </div>
</div>

<style>
.hide {
  display: none;
}
</style>

<script>
const dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach((dropdown) => {
  const button = dropdown.querySelector('button');
  const list = dropdown.querySelector('.dropdown-list');

  button.addEventListener('click', (e) => {
    list.classList.toggle('hide');
  });
});
</script>

    This code uses the querySelectorAll() method to select all dropdown elements, and then attaches a click event listener to each button element inside a dropdown. When a button is clicked, the corresponding dropdown list is toggled to show or hide using the classList.toggle() method. You can also modify the HTML structure to fit your design needs, as long as you keep the class names and the event listener logic intact.

    I hope this helps! Let me know if you have any questions.

    Login or Signup to reply.
  2. 0

    You’re toggling the hide_menu class for all of the items in your code, so that’s why both menus are shown. You need to target the ul you clicked on and only show the items inside it. Something like this should work:

    const mainItems = document.querySelectorAll('.main_item')

// Show/hide the elements in the clicked menu
mainItems.forEach((mainItem) => {
    mainItem.addEventListener('click', () => {
        const parentElement = mainItem.closest('ul')
        parentElement.classList.toggle('hide_menu')
    })
})
    ul.hide_menu .menu_item {
    display: none;
}
    <div class="menu_wrapper">
    <ul class="menu_company hide_menu">
        <li class="main_item company">Our Company</li>
        <li class="menu_item">About US</li>  
        <li class="menu_item">Our offices</li>
        <li class="menu_item">Careers</li>
    </ul>
    <ul class="products hide_menu">
        <li class="main_item products">Our Products</li>
        <li class="menu_item">Product A</li>
        <li class="menu_item">Product B</li>
        <li class="menu_item">Communication</li>
    </ul>
</div>

    Here the CSS is doing a bit more of the heavy lifting, so you only need to change the class of 1 element instead of hiding each menu item separately. This also takes care of hiding the menu when clicking on the .main_item element of an already opened menu, which I’m assuming you would want (if not, just ignore menus that are already open). Depending on your application, you might also want to hide any other menus that are currently open, but I’ll leave that as an exercise if it’s a requirement 😊

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search