如何确保只有一个html元素是可见的

Question

我有两个列表，目前两个列表同时切换，我希望一次只能看到一个列表项，

如果我点击列表一，只列出一个项目应该是可见的，反之亦然。

代码

当前，这两个列表项目都显示在单击。

​

​

​

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>

​