Struggling with your Dropdown Menu onclick functionality in Javascript? Let me lend

Question

Struggling with your Dropdown Menu onclick functionality in Javascript? Let me lend

I am seeking assistance with implementing a Javascript onclick Dropdown Menu. The current issue I am facing is that when one menu is opened and another menu is clicked, the previous menu remains open. My desired solution is to have the previously open menu close automatically when a new menu is opened.

<!DOCTYPE HTML>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
    }
    
    .navbar {
      width: 100%;
      padding: 0 10% 0 10%;
      overflow: hidden;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }
    
    .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      padding: 21.5px 20px;
      background-color: inherit;
      margin: 0;
      cursor: pointer;
      font-weight: bolder;
      color: #2d3436;
    }
    
    .dropdown {
      float: left;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #fff;
      min-width: 460px;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      height: 450px;
    }
    
    .show {
      display: block
    }
  </style>
</head>

<body>
  <div class="navbar">
    <div class="dropdown">
      <button onclick="my1Function()" class="dropbtn dropbtn1">Dropdown <i class="fas fa-caret-down"></i></button>
      <div id="myDropdown1" class="dropdown-content dropdown-content1">

      </div>
    </div>

    <div class="dropdown">
      <button onclick="my2Function()" class="dropbtn dropbtn2">Dropdown <i class="fas fa-caret-down"></i></button>
      <div id="myDropdown2" class="dropdown-content dropdown-content2">

      </div>
    </div>

    <div class="dropdown">
      <button onclick="my3Function()" class="dropbtn dropbtn3">Dropdown <i class="fas fa-caret-down"></i></button>
      <div id="myDropdown3" class="dropdown-content dropdown-content2">

      </div>
    </div>
  </div>
  <script>
    function my1Function() {
      document.getElementById("myDropdown1").classList.toggle("show");
    }

    function my2Function() {
      document.getElementById("myDropdown2").classList.toggle("show");
    }

    function my3Function() {
      document.getElementById("myDropdown3").classList.toggle("show");
    }
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
  </script>
</body>

</html>

javascript html css

Answer 1

Answer №1

To simplify dropdown button functionality, consider using a generic event listener instead of individual onclick events like my1Function.

Hide any currently displayed dropdown content to manage visibility when clicking outside.
Show the specific dropdown content related to the clicked button.

<!DOCTYPE HTML>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
    }
    
    .navbar {
      width: 100%;
      padding: 0 10% 0 10%;
      overflow: hidden;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }
    
    .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      padding: 21.5px 20px;
      background-color: inherit;
      margin: 0;
      cursor: pointer;
      font-weight: bolder;
      color: #2d3436;
    }
    
    .dropdown {
      float: left;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #fff;
      min-width: 460px;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      height: 450px;
    }
    
    .show {
      display: block
    }
  </style>
</head>

<body>
  <div class="navbar">
    <div class="dropdown">
      <button class="dropbtn dropbtn1">Dropdown 1<i class="fas fa-caret-down"></i></button>
      <div id="myDropdown1" class="dropdown-content dropdown-content1">
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn2">Dropdown 2<i class="fas fa-caret-down"></i></button>
      <div id="myDropdown2" class="dropdown-content dropdown-content2">

      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn3">Dropdown 3<i class="fas fa-caret-down"></i></button>
      <div id="myDropdown3" class="dropdown-content dropdown-content2">

      </div>
    </div>
  </div>
  <script>
    window.addEventListener('click', function(event) {
      // Hide any open dropdown content
      const dropdownContents = document.querySelectorAll('.dropdown-content')
      dropdownContents.forEach(content => {
        content.classList.remove('show');
      });

      // Show the dropdown content respective to the clicked button
      if (event.target.matches('.dropbtn')) {
        event.target.nextElementSibling.classList.add('show');
      }
    })
  </script>
</body>

</html>

Answer 2

To simplify dropdown button functionality, consider using a generic event listener instead of individual onclick events like my1Function.

Hide any currently displayed dropdown content to manage visibility when clicking outside.
Show the specific dropdown content related to the clicked button.

<!DOCTYPE HTML>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
    }
    
    .navbar {
      width: 100%;
      padding: 0 10% 0 10%;
      overflow: hidden;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }
    
    .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      padding: 21.5px 20px;
      background-color: inherit;
      margin: 0;
      cursor: pointer;
      font-weight: bolder;
      color: #2d3436;
    }
    
    .dropdown {
      float: left;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #fff;
      min-width: 460px;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      height: 450px;
    }
    
    .show {
      display: block
    }
  </style>
</head>

<body>
  <div class="navbar">
    <div class="dropdown">
      <button class="dropbtn dropbtn1">Dropdown 1<i class="fas fa-caret-down"></i></button>
      <div id="myDropdown1" class="dropdown-content dropdown-content1">
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn2">Dropdown 2<i class="fas fa-caret-down"></i></button>
      <div id="myDropdown2" class="dropdown-content dropdown-content2">

      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn3">Dropdown 3<i class="fas fa-caret-down"></i></button>
      <div id="myDropdown3" class="dropdown-content dropdown-content2">

      </div>
    </div>
  </div>
  <script>
    window.addEventListener('click', function(event) {
      // Hide any open dropdown content
      const dropdownContents = document.querySelectorAll('.dropdown-content')
      dropdownContents.forEach(content => {
        content.classList.remove('show');
      });

      // Show the dropdown content respective to the clicked button
      if (event.target.matches('.dropbtn')) {
        event.target.nextElementSibling.classList.add('show');
      }
    })
  </script>
</body>

</html>

Answer 3

Answer №2

If I were to implement a dropdown menu, I would use the following structure:

<nav>
    <ul class="my-nav">
        <li>
            <details class="dropdown">
                <summary>Click here for more options</summary>
                <ul>
                    <li><a href="#option1">Option 1</a></li>
                    <li><a href="#option2">Option 2</a></li>
                </ul>
            </details>
        </li>
        <li>
            <details class="dropdown">
                <summary>Another dropdown menu</summary>
                <ul>
                    <li><a href="#menu-item1">Menu Item 1</a></li>
                    <li><a href="#menu-item2">Menu Item 2</a></li>
                </ul>
            </details>
        </li>
    </ul>
</nav>

Of course, each dropdown would have its own unique content and links. Here is the accompanying JavaScript code:

var nav = document.querySelector('.my-nav');
nav.addEventListener('toggle', function (event) {

    // Only execute if dropdown is being opened
    if (!event.target.open) return;

    // Close any other open dropdowns
    var dropdowns = nav.querySelectorAll('.dropdown[open]');
    Array.prototype.forEach.call(dropdowns, function (dropdown) {
        if (dropdown === event.target) return;
        dropdown.removeAttribute('open');
    });

}, true);

Answer 4

If I were to implement a dropdown menu, I would use the following structure:

<nav>
    <ul class="my-nav">
        <li>
            <details class="dropdown">
                <summary>Click here for more options</summary>
                <ul>
                    <li><a href="#option1">Option 1</a></li>
                    <li><a href="#option2">Option 2</a></li>
                </ul>
            </details>
        </li>
        <li>
            <details class="dropdown">
                <summary>Another dropdown menu</summary>
                <ul>
                    <li><a href="#menu-item1">Menu Item 1</a></li>
                    <li><a href="#menu-item2">Menu Item 2</a></li>
                </ul>
            </details>
        </li>
    </ul>
</nav>

Of course, each dropdown would have its own unique content and links. Here is the accompanying JavaScript code:

var nav = document.querySelector('.my-nav');
nav.addEventListener('toggle', function (event) {

    // Only execute if dropdown is being opened
    if (!event.target.open) return;

    // Close any other open dropdowns
    var dropdowns = nav.querySelectorAll('.dropdown[open]');
    Array.prototype.forEach.call(dropdowns, function (dropdown) {
        if (dropdown === event.target) return;
        dropdown.removeAttribute('open');
    });

}, true);

Struggling with your Dropdown Menu onclick functionality in Javascript? Let me lend

Answer №1

Answer №2

Similar questions

Encountered "Function undefined error when invoking within a map in TypeScript"

Quiz application features various button states for optimal user interaction

How Can You Change the Position of a Threejs Vector3?

Experimenting with a loader component in AngularJS

How come my justify-content property isn't functioning properly with Flexbox?

Having trouble getting the CSS Hover state to function properly?

What is the best way to align the content of a <ul> in the center while keeping the text left-aligned and setting a max-width

What is the relationship between font size adjustments and the dimensions of the surrounding parent div element?

There are two borders in place, with the second border present only on the right and bottom

Getting the value of dynamically generated buttons when they are clicked in PHP - a simple guide

Strategies for identifying CSS properties within a div element

Unable to organize list of entities based on numerical values

Python scripts are unable to perform file uploads through an HTTP form, unlike PHP scripts which are compatible

Generating a preview image for a three.js environment

What could be causing AngularJS to truncate my URL in the search bar?

Enhance the numerical worth of the variable through the implementation of the function

Determining the precise spacing needed for a personalized cursor

How to Round Decimals in DataTables

Convert text to bold when checkbox is selected and alter color upon selecting a radio button

Saving asp.net strings in different formats to datetime fields in a database