如何切换触发器

Question

如何触发切换？我有两个 Toogle，每次只需要显示一个。

单击一次切换按钮时，两个容器会在另一个容器下方打开一个容器，但我希望第一个切换容器变得不活动或折叠，而第二个容器处于活动状态，但在同一位置，而不是一个在另一个容器下方。

例如

单击“打开 1”--> div berlin 展开

单击“打开 2”--> div berlin 折叠和 div zurich 展开

ETC...

我的HTML：

<div class="toggle">

<button  onclick="male()">open 1</button>

<button  onclick="female()">open 2</button>

</div>

<div id="berlin" style="display: none">

Toggle 1 content

</div>

<div id="zurich" style="display: none">

Toggle 2 content

</div>

我的JS

function male() {

  var x = document.getElementById("berlin");

  if (x.style.display === "none") {

    x.style.display = "block";

  } else {

    x.style.display = "none";

  }

}

function female() {

  var x = document.getElementById("zurich");

  if (x.style.display === "none") {

    x.style.display = "block";

  } else {

    x.style.display = "none";

  }

}

有什么想法或帮助吗？提前谢谢

Answer 1

默认情况下，您可以简单地在单击 div 时隐藏该berlindiv zurich，对于单击其他 div 也可以执行相同的操作，例如：function male() {&nbsp; var x = document.getElementById("berlin");&nbsp; document.getElementById("zurich").style.display = "none";&nbsp; x.style.display = x.style.display === "none" ? "block" : "none";}function female() {&nbsp; var x = document.getElementById("zurich");&nbsp; document.getElementById("berlin").style.display = "none";&nbsp; x.style.display = x.style.display === "none" ? "block" : "none";}div {&nbsp; background-color: #EEE;&nbsp; border: 2px solid green;&nbsp; padding: 20px;&nbsp; margin: 20px;}<div class="toggle">&nbsp; <button onclick="male()">open 1</button>&nbsp; <button onclick="female()">open 2</button></div><div id="berlin" style="display: none">&nbsp; Toggle 1 content</div><div id="zurich" style="display: none">&nbsp; Toggle 2 content</div>

Answer 2

您还可以使用该hidden属性，例如：let x = document.getElementById("berlin");let y = document.getElementById("zurich");function male() {&nbsp; x.hidden = !x.hidden;&nbsp; y.hidden = true;}function female() {&nbsp; y.hidden = !y.hidden;&nbsp; x.hidden = true;}<div class="toggle">&nbsp; <button onclick="male()">open 1</button>&nbsp; <button onclick="female()">open 2</button></div><div id="berlin" hidden>&nbsp; Toggle 1 content</div><div id="zurich" hidden>&nbsp; Toggle 2 content</div>

Answer 3

如果您有更多切换按钮和更多要显示隐藏的容器，那么这应该会有所帮助const toggleContainers = document.querySelectorAll('.toggle-container');function hideAllToggles() {&nbsp; toggleContainers.forEach(toggle => {&nbsp; &nbsp; toggle.classList.add('hidden');&nbsp; });}hideAllToggles();function showToggle(id) {&nbsp; hideAllToggles();&nbsp; var x = document.querySelector(`#${id}`);&nbsp; x.classList.remove('hidden');&nbsp; x.classList.remove('active');}.hidden {&nbsp; display: none;}.active {&nbsp; display: block;}<div class="toggle"><button&nbsp; onclick="showToggle('berlin')">open 1</button><button&nbsp; onclick="showToggle('zurich')">open 2</button></div><div class="toggle-container" id="berlin">Toggle 1 content</div><div class="toggle-container" id="zurich">Toggle 2 content</div>