JavaScript 显示/隐藏

Question

我正在使用这个基本代码来隐藏一个文本 block 并显示另一个文本 block ，它运行良好，但是我需要做什么才能再次单击关闭文本？现在它一直保持打开状态，直到选择了其他东西，所以在第一次选择之后，一个或另一个总是打开的。我添加了一些有效的关闭 链接，但更愿意单击标题(或其他任何内容)以再次关闭它。其他类似问题似乎要么使用 jQuery，要么在选择链接后隐藏链接。

function showhide(id) {
  if (document.getElementById) {
    var divid = document.getElementById(id);
    var divs = document.getElementsByClassName('hide');
    for (var i = 0; i < divs.length; i++) {
      divs[i].style.display = 'none';
    }
    divid.style.display = 'block';
  }
  return false;
}

<a onclick="showhide('toggle1');">
  <h4>-> Title 1</h4>
</a>
<div class="hide" id="toggle1" style="display:none">
  Some text here. <a onclick="showhide('verify');">close</a>
</div>

<a onclick="showhide('toggle2');">
  <h4>-> Title 2</h4>
</a>
<div class="hide" id="toggle2" style="display:none">
  Other text here. <a onclick="showhide('verify');">close</a>
</div>

Answer 1

下面的代码将检查与已单击的链接相关联的元素是否已经可见，如果是，则将其与其他元素一起隐藏。无需任何关闭链接。

此外，正如@KScandrett 指出的那样，检查浏览器是否支持 document.getElementById 是多余的，因为所有浏览器都支持它，所以我没有将其带到这个答案中。

function showhide(id) {
    var divid = document.getElementById(id);
    var divs = document.getElementsByClassName('hide');
    var showElement = true;
    if (divid.style.display === 'block') {
        showElement = false;
    }
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.display = 'none';
    }
    if (showElement) {
        divid.style.display = 'block';
    }
    return false;
}

<a onclick="showhide('toggle1');">
  <h4>-> Title 1</h4>
</a>
<div class="hide" id="toggle1" style="display:none">
  Some text here.
</div>

<a onclick="showhide('toggle2');">
  <h4>-> Title 2</h4>
</a>
<div class="hide" id="toggle2" style="display:none">
  Other text here.
</div>