Блог

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

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

#javascript #function #dropdown

#javascript #функция #выпадающий

Вопрос:

Я создаю выпадающий список на своем сайте, но натыкаюсь на проблему: выпадающий список работает для одной части. У меня есть кнопка «Инструменты», и при нажатии на нее отображаются 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, чтобы отобразить соответствующий список? Спасибо!

Комментарии:

1. у вас просто есть два divs с одинаковым идентификатором. Идентификатор уникален . Перейдите к классу и сделайте так, чтобы js ссылался на него

2. Идентификаторы должны быть уникальными, поэтому ваша кнопка будет переключать только первый, поскольку действителен только первый идентификатор. Вместо переключения myDropdown переключите выпадающий список, связанный с кнопкой. Это можно сделать, либо выбрав элемент после кнопки, либо введя правильный идентификатор в атрибут данных, либо любым другим способом, который вы можете придумать.

3. Это правильно, это пролетело прямо над моей головой. Спасибо: D!

Ответ №1:

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

  • у вас было два divs с одинаковым идентификатором. идентификаторы элементов 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>