主页 / 问题 / 1048875
Accepted
Aleksandr
Asked:2020-11-21 19:06:07 +0000 UTC2020-11-21 19:06:07 +0000 UTC

页面上两个下拉列表冲突，告诉我错误在哪里？

  • 772

我写了一个下拉列表的JS代码，一个很好用，但是第二个不行，告诉我哪里出错了？由于页面上会有很多下拉列表，但我希望它们彼此独立工作，同时 JS 代码不会膨胀。

/*Функция добавляет/удаляет класс для показа списка.*/
function myFunction() {
    document.querySelector('.dropdown-content').classList.toggle('show');
}


window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
        let dropdowns = document.getElementsByClassName('dropdown-content');

        for (let i = 0; i < dropdowns.length; i++) {
            let openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
};

/* Выбираю конкретный селектор */
document.querySelector('.dropbtn').addEventListener('click', myFunction);
.dropbtn {
  background-color: #3498db;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
}

.show {
  display: block;
}

body {
display: flex;
justify-content: space-around;
}
<div class="dropdown">
  <button class="dropbtn">Home</button>

  <div class="dropdown-content">
    <div>blog</div>
    <div>About</div>
    <div>Contact</div>
  </div>
</div>



<div class="dropdown">
  <button class="dropbtn">Home</button>

  <div class="dropdown-content">
    <div>blog</div>
    <div>About</div>
    <div>Contact</div>
  </div>
</div>

只需要纯 JavaScript 的帮助！

javascript

1 个回答

  1. Best Answer
    /* Выбираю конкретный селектор */
document.querySelector('.dropbtn').addEventListener('click', myFunction);

    您没有选择特定的选择器，而是选择该类的第一个元素。其余功能不适用。但问题是 myFunction() 还为您选择了 .dropdown-content 的第一个元素，因此即使您使用 .dropbtn 修复了逻辑，它仍然无法正常工作。

    您需要首先形成所有 .dropbtn 的数组，然后遍历它，找到每个元素的相邻 .dropdown-content 并已经打开/隐藏它：

    window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
        let dropdowns = document.getElementsByClassName('dropdown-content');

        for (let i = 0; i < dropdowns.length; i++) {
            let openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
};

const dropbtn = document.querySelectorAll('.dropbtn');

dropbtn.forEach(function(item){
  item.onclick = function(){
      this.nextElementSibling.classList.toggle('show')
  };
})
    .dropbtn {
  background-color: #3498db;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
}

.show {
  display: block;
}

body {
display: flex;
justify-content: space-around;
}
    <div class="dropdown">
  <button class="dropbtn">Home</button>

  <div class="dropdown-content">
    <div>blog</div>
    <div>About</div>
    <div>Contact</div>
  </div>
</div>



<div class="dropdown">
  <button class="dropbtn">Home</button>

  <div class="dropdown-content">
    <div>blog</div>
    <div>About</div>
    <div>Contact</div>
  </div>
</div>

    • 1

相关问题