如何切换触发器答案

【问题标题】：how to Toggle Triggers如何切换触发器
【发布时间】：2020-04-04 06:25:05
【问题描述】：

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

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

例如

点击“open 1” --> div berlin 展开

点击“open 2” --> div berlin collapse 和 div zurich expand

等等……

我的 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";
  }
}

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

【问题讨论】：

标签： javascript html

【解决方案1】：

你可以简单地隐藏berlin div 点击zurich div by deafult 和同样你可以对其他 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>

【讨论】：

yaayyyy，效果很好，非常感谢您的超快速解答！

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：