Как использовать одну функцию для выпадающего JavaScript?

Question

Я делаю выпадающее меню на своем сайте, но наткнулся на проблему: раскрывающийся список работает для одной части.У меня есть кнопка «Инструменты», и при нажатии она покажет 3 основных параметра.Сейчас я пытаюсь добавить ту же опцию в разделе «Инструменты».Как мне это сделать?Я попытался скопировать его, но, как и ожидалось, он открывает опции «Инструменты».

    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    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');
          }
        }
      }
    }

    .dropdown-content {
      display: none;
      min-width: 160px;
      min-height:70px;
      overflow: hidden;
      z-index: 1;
    }
    .dropdown-content li a {
      text-decoration: none;
      display: block;
    }
    .show {display: block;}

    <button button onclick="myFunction('myDropdown')" class="dropbtn">Tools</button>
      	<div id="myDropdown" class="dropdown-content">
        		<li class="force-css"><a href="#">Blok 1</a></li>
        		<li class="force-css"><a href="#">Blok 2</a></li>
        		<li class="force-css"><a href="#">Blok 3</a></li>
      	</div>
                          
    <button button onclick="myFunction('myDropdown')" class="dropbtn">Bouw</button>
      	<div id="myDropdown" class="dropdown-content">
        		<li class="force-css"><a href="#">Blok 1</a></li>
        		<li class="force-css"><a href="#">Blok 2</a></li>
        		<li class="force-css"><a href="#">Blok 3</a></li>
      	</div>

Кроме того, есть ли способ просто сделать функцию один раз и изменить html / css, чтобы показать соответствующий список?Спасибо!

Answer 1

Было две проблемы:

• у вас было два div с одинаковым идентификатором. Идентификаторы HTML-элементов должны быть уникальными в вашей объектной модели документа, иначе у вас возникнут проблемы при работе с этими элементами.
• ваша myFunction функция не использовала идентификатор раскрывающегося списка, переданный в качестве параметра. Таким образом, он был связан с тем же элементом, чей идентификатор был «myDropdown»

Я исправил обе проблемы во фрагменте ниже:

/* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction(dropDownId) {
        document.getElementById(dropDownId).classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    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');
          }
        }
      }
    }

.dropdown-content {
      display: none;
      min-width: 160px;
      min-height:70px;
      overflow: hidden;
      z-index: 1;
    }
    .dropdown-content li a {
      text-decoration: none;
      display: block;
    }
    .show {display: block;}

<button button onclick="myFunction('myDropdown1')" class="dropbtn">Tools</button>
      	<div id="myDropdown1" class="dropdown-content">
        		<li class="force-css"><a href="#">Tools 1</a></li>
        		<li class="force-css"><a href="#">Tools 2</a></li>
        		<li class="force-css"><a href="#">Tools 3</a></li>
      	</div>
                          
    <button button onclick="myFunction('myDropdown2')" class="dropbtn">Bouw</button>
      	<div id="myDropdown2" class="dropdown-content">
        		<li class="force-css"><a href="#">Bouw 1</a></li>
        		<li class="force-css"><a href="#">Bouw 2</a></li>
        		<li class="force-css"><a href="#">Bouw 3</a></li>
      	</div>