자바 스크립트 토글 (한 번에 하나씩)

Question

한 번에 하나의 div 만 열어 볼 수있는 간단한 방법을 찾고 있습니다. 나는 accordian 작풍 수직 항법을 사용하고 1 개를 클릭 할 때, 아래에 div를 표시하고, 다른 것을 클릭 할 때, 똑같이한다. 이전 div가 다른 nav 링크를 클릭하면 다시 숨기고 싶습니다.

이가 가까이 열고하세요 위해 사용하는 자바 스크립트 메신저입니다 : 내가 다른이 열려있는 경우 그 사업부를 닫습니다 추가 할 수 있습니다 뭔가 다른

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

있습니까?

Answer 1

아주 간단한 방법은 바로 이전에 열었던 요소를 추적하는 것입니다 Divs에 "menudiv"와 같은 고유 한 클래스 이름을 부여한 다음 함수에 다음과 같은 내용을 추가하면됩니다.

var menu_divs = document.getElementsByClassName("menudiv"); 
for (var i = 0; i < menu_divs.length; i++) { 
    if (menu_divs[i] != e) 
     menu_divs[i].style.display = 'none'; 
} 

Answer 2

모두 같은 등급을 지정하십시오. 클래스 이름별로 모두 숨기고 전달 된 ID로 클릭 한 것을 표시하십시오.

Answer 3

가장 좋은 방법은하는 것입니다

• 사용 CSS가 된 DIV 모두를 숨길
• 하나를 표시 할
; "활성"또는 무엇이든간에 클래스를 열린 div에 추가하십시오.
• 그런 다음 CSS를 display : block 또는 그 밖의 클래스와 함께 적용하십시오. 제이슨로

는 jQuery를 사용하여이 작업을 수행 할 수 또는 당신이없이 할 수있는 자신의 코멘트했다.

jQuery는 애니메이션 지원과보다 쉬운 클래스 조작을 제공합니다.

(function() { // using an IIFE to prevent polluting the global namespace 
    var opened_element = null; 

    window.toggle_visibility = function(id) { 
     var e = document.getElementById(id); 
     if (opened_element && opened_element !== e) { 
      opened_element.style.display = 'none'; 
     } 
     if(e.style.display == 'block') { 
      e.style.display = 'none'; 
     } 
     else { 
      e.style.display = 'block'; 
     } 
     opened_element = e; 
    }; 
}()); 

Answer 4

당신이 jQuery를 사용하지 않는 때문에, 나는 당신이 할 수있는, 당신은 자바 스크립트 대답을 원하는 가정

jQuery Toggle Class