如何切换触发器

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>我的JSfunction 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() {

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

  document.getElementById("zurich").style.display = "none";

  x.style.display = x.style.display === "none" ? "block" : "none";

}

function female() {

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

  document.getElementById("berlin").style.display = "none";

  x.style.display = x.style.display === "none" ? "block" : "none";

}

div {

  background-color: #EEE;

  border: 2px solid green;

  padding: 20px;

  margin: 20px;

}

<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>

Answer 2

您还可以使用该hidden属性，例如：

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

let y = document.getElementById("zurich");

function male() {

  x.hidden = !x.hidden;

  y.hidden = true;

}

function female() {

  y.hidden = !y.hidden;

  x.hidden = true;

}

<div class="toggle">

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

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

</div>

<div id="berlin" hidden>

  Toggle 1 content

</div>

<div id="zurich" hidden>

  Toggle 2 content

</div>

Answer 3

如果您有更多切换按钮和更多要显示隐藏的容器，那么这应该会有所帮助

const toggleContainers = document.querySelectorAll('.toggle-container');

function hideAllToggles() {

  toggleContainers.forEach(toggle => {

    toggle.classList.add('hidden');

  });

}

hideAllToggles();

function showToggle(id) {

  hideAllToggles();

  var x = document.querySelector(`#${id}`);

  x.classList.remove('hidden');

  x.classList.remove('active');

}

.hidden {

  display: none;

}

.active {

  display: block;

}

<div class="toggle">

<button  onclick="showToggle('berlin')">open 1</button>

<button  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>