JS 가시성 켜기 : 클릭시 이미 보이는 요소 숨기기

Question

링크를 클릭하면 페이지의 요소를 표시/숨기려면 자바 스크립트를 사용하고 있습니다. 그것은 예상대로 작동합니다. 그러나 링크를 클릭하면 다른 모든 보이는 요소를 숨기고 싶습니다. 이것을 어떻게 할 수 있습니까? 미리 감사드립니다.

**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

첫 세트 U가 전환되는 항목의 표시로 모든 요소 :

여기 내 코드입니다. 토글하는 요소를 반대 방향으로 설정하십시오. 몸의 모든 요소를 ​​통해

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>