Javascript 单击时显示文本，然后在下次单击时关闭所有文本

Question

此代码允许我单击 link 并为每个显示一段文本，然后如果我单击相同的 link，相同的文本将再次隐藏。

   function reveal(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'inline')
      e.style.display = 'none';
   else
      e.style.display = 'inline';   
}

但我想要的是当我再次点击时隐藏之前显示的所有文本。

Answer 1

为所有隐藏的文本元素设置一个通用 class，并使用 document.querySelectorAll(".myClass"); 隐藏它们 select，遍历它们并隐藏每一个：

function reveal(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'inline') {
    e.style.display = 'none';
  } else {
    var allTexts = document.querySelectorAll(".myHiddenText");
    for (var i = 0, len = allTexts.length; i < len; i++) {
      allTexts[i].style.display = 'none';
    }
    e.style.display = 'inline';
  }
}

.myHiddenText {
  display: none;
}

<a onclick="reveal('Text1');">reveal text 1</a>  <span class="myHiddenText" id="Text1">Hidden text 1</span>

<br/>
<a onclick="reveal('Text2');">reveal text 2</a>  <span class="myHiddenText" id="Text2">Hidden text 2</span>

<br/>
<a onclick="reveal('Text3');">reveal text 3</a>  <span class="myHiddenText" id="Text3">Hidden text 3</span>

<br/>
<a onclick="reveal('Text4');">reveal text 4</a>  <span class="myHiddenText" id="Text4">Hidden text 4</span>

Javascript 单击时显示文本，然后在下次单击时关闭所有文本

Javascript reveal text onclick and then close all on next click

javascript

onclick