JS：如何确保只有一个 html 元素可见

Question

我有两个列表，目前两个列表同时切换， 我希望一次只显示一个列表项，

如果我单击列表一，则仅列出一项应该可见，反之亦然。

CODE

目前两个列表项都在点击时显示。

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

<div class=" dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-3 cursor-pointer">LIST ONE</div>

<div class="hidden">
  <div class="cursor-pointer w-full     border-gray-100  items-start border-b-2 " style="height:40px">
    <div class="  text-base text-gray-700 ml-10 mt-7 ">option 1</a>
    </div>
  </div>
  <div class="w-full     border-gray-100  items-start border-b-2" style="height:40px">
    <div class="  text-base text-gray-700 ml-10 mt-3"> option 2</a>
    </div>
  </div>
</div>

<div class="w-full     border-gray-100  items-start border-b-2">
  <div class="dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-8 cursor-pointer" style="height:40px">LIST TWO
  </div>

  <div class="hidden">

    <div class="w-full     border-gray-100  items-start border-b-2" style="height:40px">
      <div class="  text-base text-gray-700 ml-10 mt-1"><a href=>option 1</a></div>
    </div>
    <div class="w-full     border-gray-100  items-start border-b-2" style="height:40px">
      <div class="  text-base text-gray-700 ml-10 mt-3"><a href=>option 2</a></div>
    </div>


  </div>
</div>
</div>

Answer 1

你可以委托和切换你已经拥有的隐藏

注意我在隐藏的 div 中添加了一个类

const lists = document.querySelectorAll(".list")
const buttons = document.querySelectorAll(".dropdown-btn")
document.getElementById("container").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("dropdown-btn")) {
    tgt.classList.toggle("active");
    const thisList = tgt.nextElementSibling;
    const show = tgt.classList.contains('active')
    lists.forEach(list => list.classList.toggle("hidden", !show || list !=thisList))
    buttons.forEach(btn => btn.classList.toggle("active",btn === tgt && show))
  }
});

.hidden {
  display: none;
}

.active {
  color: red;
}

<div id="container">
  <div class=" dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-3 cursor-pointer">LIST ONE</div>
  <div class="hidden list">
    <div class="cursor-pointer w-full border-gray-100 items-start border-b-2 " style="height:40px">
      <div class=" text-base text-gray-700 ml-10 mt-7 "><a href="">option 1</a>
      </div>
    </div>
    <div class="w-full border-gray-100 items-start border-b-2" style="height:40px">
      <div class="text-base text-gray-700 ml-10 mt-3"><a href="">option 2</a>
      </div>
    </div>
  </div>

  <div class="w-full border-gray-100 items-start border-b-2">
    <div class="dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-8 cursor-pointer" style="height:40px">LIST TWO
    </div>

    <div class="hidden list">

      <div class="w-full border-gray-100 items-start border-b-2" style="height:40px">
        <div class=" text-base text-gray-700 ml-10 mt-1"><a href="">option 1</a></div>
      </div>
      <div class="w-full border-gray-100 items-start border-b-2" style="height:40px">
        <div class=" text-base text-gray-700 ml-10 mt-3"><a href="">option 2</a></div>
      </div>


    </div>
  </div>
</div>