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

Question

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

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

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

Answer 1

为所有隐藏的文本元素设置一个通用类，要隐藏它们，您可以使用 document.querySelectorAll(".myClass"); 选择它们，循环遍历它们并隐藏每一个:

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>