Проблема в том, что все 3 ваших выпадающих имеют одинаковые id, что недопустимо. И поскольку все 3 кнопки используют один и тот же обратный вызов, и этот обратный вызов специально переключает видимость этого повторно используемого id, система останавливается, когда находит первый соответствующий элемент (поскольку никогда не должно быть более одного элемента с одинаковым id в первое место).
Реальность такова, что использование id s, во-первых, хотя это кажется легким подходом, приводит к хрупкому коду, который не масштабируется (как вы обнаружили), поэтому избегайте id s и используйте CSS классы и иерархию ваших HTML элементов в качестве методов поиска элементов.
Кроме того, никогда не используйте getElementsByClassName() или встроенное HTML событие Атрибуты .
Сделайте себе одолжение и держитесь как можно дальше от школ W3, поскольку, как известно, у вас есть неполная, неточная или просто неверная информация. Вместо этого вы получите гораздо более полную и актуальную информацию от Сети разработчиков Mozilla (MDN) , которые являются носителями языка JavaScript.
См. Комментарии ниже для деталей:
// Set your events up in JavaScript, not with HTML event attributes
document.addEventListener("click", function(event) {
// Loop over all the menus
document.querySelectorAll(".dropdown-content").forEach(function(dd){
dd.classList.remove("show"); // Hide the menu
});
// If the clicked element was a button
if (event.target.classList.contains('dropbtn')) {
// Show just the menu that corresponds to the clicked button
event.target.nextElementSibling.classList.toggle("show");
}
});
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<div class="dropdown">
<button class="dropbtn">Dropdown 1</button>
<div class="dropdown-content">
<a href="#home">Home 1</a>
<a href="#about">About 1</a>
<a href="#contact">Contact 1</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown 2</button>
<div class="dropdown-content">
<a href="#home">Home 2</a>
<a href="#about">About 2</a>
<a href="#contact">Contact 2</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown 3</button>
<div class="dropdown-content">
<a href="#home">Home 3</a>
<a href="#about">About 3</a>
<a href="#contact">Contact 3</a>
</div>
</div>