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

What steps should be taken to fix the sinopia installation error?

Placing a user's username within an ejs template using express and node.js

How to bring in images from a local source in a React.js file

Should we enable client-side validation and unobtrusive JavaScript in the Web.config file?

Unable to designate the drop-down option as the default selection

I encounter issues with HTML input fields becoming unresponsive whenever I attempt to apply CSS filters in IE8 for stretching the background

Ajax cannot seem to come to a resolution

Fill the list items with values from the given array

Tips for creating a mandatory textarea input field

Error: The "map" property cannot be read if it is undefined in a Django and React application

Arrange the header and input within a div using flexbox to achieve different alignments

Use jQuery to assign a value of "true" when a checkbox is

Tips for capturing text input from a Quill rich text editor div

Exclusive to Safari: Codesandbox is experiencing difficulties retrieving data from the localhost server

Implementing JavaScript Functions to Trigger Control Key and Plus/Minus Events

What is the method of posting to PHP using JavaScript without utilizing Ajax?

Hide the button with jQuery Ajax if the variable is deemed acceptable upon submission

Is it possible to receive returned string values using fetch()?

The React server-side rendering isn't reflecting changes made on the client-side route

Is there a way to duplicate and insert a function in node.js if I only have its name?