Issue with Dropdown Menu functionality while using multiple dropdown options

Question

Issue with Dropdown Menu functionality while using multiple dropdown options

I am currently experimenting with dropdown menus from W3Schools and have encountered an issue when trying to implement two dropdown options. The code works fine for a single dropdown, but when I try to add a second one using GetElementsByClassName instead of GetElementById, it doesn't function as expected. Here is the link to the problematic code.

code.html

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn"  onclick="myFunction()">Dropdown1</a>
<div class="dropdown-content myDropdown">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown2</a>
<div class="dropdown-content myDropdown">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
 </div>
</li>

 function myFunction() {
   document.getElementsByClassName("myDropdown").classList.toggle("show");
}


 window.onclick = function(e) {
 if (!e.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
  var openDropdown = dropdowns[d];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
  }
}
}
}

javascript html css twitter-bootstrap

Answer 1

Answer №1

The reason your fiddle was not working is due to the fact that myFunction was not defined (you can see this error in the developer console of your browser). This is because jsFiddle wraps your javascript code.

<script type="text/javascript">//<![CDATA[
window.onload=function(){
  // Your code goes here
}//]]> 
</script>

Therefore, your function will only be accessible within the scope of the window.onload function and not outside of it. To make your function available globally in your html, you need to define it in the global scope which is window.

Once you do this, you can interact with your function and see that

document.getElementsByClassName("myDropdown")

returns all dropdown elements as an array. The solution is simple - add a this parameter when calling myFunction in the html. Then, in your function, toggle the "show" class on the next element.

<li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(this)">Dropdown1</a>
    <div class="dropdown-content myDropdown">
      <a href="#">Link 11</a>
      <a href="#">Link 21</a>
      <a href="#">Link 31</a>
    </div>
</li>

function myFunction(el) {
  el.nextElementSibling.classList.add("show");
}

Another issue you might encounter is that when you click on Dropdown1 and then on Dropdown2, the first dropdown doesn't disappear. You can view a working demo here :)

Answer 2

The reason your fiddle was not working is due to the fact that myFunction was not defined (you can see this error in the developer console of your browser). This is because jsFiddle wraps your javascript code.

<script type="text/javascript">//<![CDATA[
window.onload=function(){
  // Your code goes here
}//]]> 
</script>

Therefore, your function will only be accessible within the scope of the window.onload function and not outside of it. To make your function available globally in your html, you need to define it in the global scope which is window.

Once you do this, you can interact with your function and see that

document.getElementsByClassName("myDropdown")

returns all dropdown elements as an array. The solution is simple - add a this parameter when calling myFunction in the html. Then, in your function, toggle the "show" class on the next element.

<li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(this)">Dropdown1</a>
    <div class="dropdown-content myDropdown">
      <a href="#">Link 11</a>
      <a href="#">Link 21</a>
      <a href="#">Link 31</a>
    </div>
</li>

function myFunction(el) {
  el.nextElementSibling.classList.add("show");
}

Another issue you might encounter is that when you click on Dropdown1 and then on Dropdown2, the first dropdown doesn't disappear. You can view a working demo here :)

Answer 3

Answer №2

I made a modification to the code by assigning unique IDs to both dropdown menus.

        <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn"  onclick="myFunction(this)">Dropdown1</a>
    <div class="dropdown-content myDropdown" id="dropdown1">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
    </li>
    <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(this)">Dropdown2</a>
    <div class="dropdown-content myDropdown" id="dropdown2">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
     </div>
    </li>
    </ul>

    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Click on the "Dropdown" link to see the dropdown menu.</p>




    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction(a) {
        //alert(a.nextElementSibling.id);    
        var divId = a.nextElementSibling.id;
        document.getElementById(divId).classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
      if (!e.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var d = 0; d < dropdowns.length; d++) {
          var openDropdown = dropdowns[d];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
    </script>

Answer 4

I made a modification to the code by assigning unique IDs to both dropdown menus.

        <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn"  onclick="myFunction(this)">Dropdown1</a>
    <div class="dropdown-content myDropdown" id="dropdown1">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
    </li>
    <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(this)">Dropdown2</a>
    <div class="dropdown-content myDropdown" id="dropdown2">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
     </div>
    </li>
    </ul>

    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Click on the "Dropdown" link to see the dropdown menu.</p>




    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction(a) {
        //alert(a.nextElementSibling.id);    
        var divId = a.nextElementSibling.id;
        document.getElementById(divId).classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
      if (!e.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var d = 0; d < dropdowns.length; d++) {
          var openDropdown = dropdowns[d];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
    </script>

Issue with Dropdown Menu functionality while using multiple dropdown options

Answer №1

Answer №2

Similar questions

A unique technique for creating a stunning visual effect with images using

Guide on redirecting to a new domain using a cookie in Express.js

Utilizing AngularJS to create a vertical calendar

JavaScript Tab Fade Effect

The chosen value remains constant even after altering the selected option

Navigating HTML with Node.js and Express.js

Tips for converting a URL to the correct route in emberjs when the location type is set to history

Tips for activating the default 500 error page in Next.js

Using Javascript to display or conceal a specific child element within a loop, based on which parent element has been clicked

Turn on the text field when the enter key is pressed

Form a column containing both row object data and html code elements

Transmitting the character symbol '&' within a string from Angular to PHP

Change hyperlink text color on Android CheckBox

HTML - maintain centered text positioning while implementing padding on the left side

Achieving a transparent inner box-shadow effect on hover: a step-by-step guide

Accordion styling using CSS

Xap or js Silverlight media player

After the recent update to version 4.2.0 of @material-ui/core, unexpected react hook errors have been

Preserve HTML element states upon refreshing the page

Retrieve data quickly and navigate directly to specified div element on page