Блог

Я недавно выучил javascript и хотел создать выпадающее меню. Так что с помощью Google мне это удалось. Проблема в том, что когда я хочу создать несколько таких выпадающих списков, это работает не так, как я хочу. Раскрывающиеся списки остаются открытыми даже после того, как я нажму за пределами раздела. Я пробовал делать с этим много вещей, которые я не собираюсь показывать, потому что это немного сбивает с толку, и мой последний вопрос был удален. Вот мой код.

index.html

 <div class="dropdown">
    <a onclick="myFunction()" class="nav-link dropbtn">Dropdown</a>
    <div id="myDropdown" class="dropdown-content">
        <a href="#home" class="nav-link">Home</a>
        <a href="#about" class="nav-link">About</a>
        <a href="#contact" class="nav-link">Contact</a>
    </div>
</div>


<div class="dropdown">
    <a onclick="myFunction()" class="nav-link dropbtn">Dropdown2</a>
    <div id="myDropdown" class="dropdown-content">
        <a href="#home" class="nav-link">Home</a>
        <a href="#about" class="nav-link">About</a>
        <a href="#contact" class="nav-link">Contact</a>
    </div>
</div>
 

script.js

 function myFunction() {
    document.getElementById("myDropdown").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');
            }
        }
    }
}
 

и стиль.css

 .dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #3b86ff;
    z-index: 1;
    min-width: 150px;

}

.dropdown-content a {
    padding: 14px 16px;
}

.dropdown-content a:hover {
    background-color: #ddd;
}


.show {
    display: block;
}
 

Объяснение содержится в коде. Вы были очень близки. Это может выглядеть совсем по-другому, но это небольшие различия. Прослушиватели щелчков лучше использовать в вашем сценарии, а не в элементах. Взгляните и задайте любые вопросы, которые у вас могут возникнуть

 window.addEventListener('load', function() {
  // wait until the page loads before working with HTML elements
  document.addEventListener('click', function(event) {
    //click listener on the document
    document.querySelectorAll('.dropdown-content').forEach(function(el) {
      if (el !== event.target) el.classList.remove('show')
      // close any showing dropdown that isn't the one just clicked
    });
    if (event.target.matches('.dropbtn')) {
      event.target.closest('.dropdown').querySelector('.dropdown-content').classList.toggle('show')
    }
    // if this is a dropdown button being clicked, toggle the show class
  })
}) 

 .dropdown {
  position: relative;
  display: inline-block;
  width: 200px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #3b86ff;
  z-index: 1;
  min-width: 150px;
}

.dropdown-content a {
  padding: 14px 16px;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
} 

 <div class="dropdown">
  <a href='#' class="nav-link dropbtn">Dropdown</a>
  <div class="dropdown-content">
    <a href="#home" class="nav-link">Home</a>
    <a href="#about" class="nav-link">About</a>
    <a href="#contact" class="nav-link">Contact</a>
  </div>
</div>


<div class="dropdown">
  <a href='#' class="nav-link dropbtn">Dropdown2</a>
  <div class="dropdown-content">
    <a href="#home" class="nav-link">Home</a>
    <a href="#about" class="nav-link">About</a>
    <a href="#contact" class="nav-link">Contact</a>
  </div>
</div>