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>

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

1 个答案: