时间戳

首页 > 解决方案 > 使用单个按钮/复选框显示/隐藏多个 div

javascript - 使用单个按钮/复选框显示/隐藏多个 div

问题描述

我想实现多行显示/隐藏，如https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp中所述， 当我尝试此操作时，它仅适用于第一个 DIV 元素，不适用于后续元素

我的要求是多个按钮来逐行显示多行英文文本的翻译，

例如。

Button-1-：显示/隐藏西班牙语
Button-2：显示隐藏德语

你好吗（始终可见）
cómo estás（由按钮 1 控制）
wie gehts（由按钮 2 控制）

我很好（始终可见）
Estoy bien（由按钮 1 控制）
ich bin ok（由按钮 2 控制）

对于由单个按钮控制的多条线路，依此类推。

标签： javascripthtmljquery

解决方案

据我了解，您希望有多个切换按钮来扩展/折叠包含某些内容的 div。因此，为此，您可以拥有一个带有参数作为语言的函数。

请参阅下面的示例并运行代码。

function myFunction(language) {

  var x = document.getElementsByClassName(language);
  
  for (var i = 0; i < x.length; i++) {

   if (x.item(i).style.display === "none") {
    x.item(i).style.display = "block";
  } else {
    x.item(i).style.display = "none";
  }
}
  
}
<button onclick="myFunction('Spanish')">Spanish</button>
<br>
How are you ? <br>
<div class="Spanish">
  cómo estás
</div>
<br>

I am fine. <br>
<div class="Spanish">
  Estoy bien
</div>
<br><br>

<button onclick="myFunction('German')">German</button>

<br>
How are you ? <br>
<div class="German">
  wie gehts
</div>
<br>

I am fine. <br>
<div class="German">
  ich bin ok
</div>

推荐阅读