JS切換可見性：如何在點擊時隱藏已經可見的元素

Question

當我點擊鏈接時，我正在使用Javascript來顯示/隱藏頁面上的元素。 它按預期工作。 但是，當我點擊鏈接時，我希望隱藏所有其他可見元素。 我怎樣才能做到這一點？ 先感謝您！

這是我的代碼：

**JS**

<script type="text/javascript" async>
<!--
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
//-->
</script>


**CSS/HTML**

div {
display:none;
}

<a href="#" onclick="toggle_visibility('punctuation');">PUNCTUATION</a>
<a href="#" onclick="toggle_visibility('grammar');">GRAMMAR</a>

<div id="punctuation">
Punctuation stuff
</div>

<div id="grammar">
Grammar stuff
</div>

Answer 1

首先將所有元素設置為您正在切換的項目的顯示。 然后將要切換的元素設置為相反的元素。

function toggle_visibility(id) {

   var e = document.getElementById(id);
   var curDisplay = e.style.display;
   el = document.getElementsByClassName('foo');
   el.forEach(function(e){
       // this can be set as 'none' is you want hide instead of toggle
       e.style.display = curDisplay;
   }) 

   if (curDisplay == 'block')
       e.style.display = 'none';
   else
       e.style.display = 'block';
}


<div class="foo" id="punctuation">
Punctuation stuff
</div>

<div class="foo"  id="grammar">
Grammar stuff
</div>