Pokaż/ukryj skrypt za pomocą javascript

Question

Mam skrypt pokazu/ukrywania, którego używam do menu. Kiedy kliknę link główny, pojawia się lista pod nim. Zastanawiam się, czy jest jakiś sposób, żeby to zmienić, tak, że gdy kliknę link, otworzy się, ale kiedy kliknę następny, zamyka drugi, zamiast pozostawić je wszystkie otwarte, chyba że klikniesz ponownie, aby zamknąć.

Oto mój skrypt:

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


<a href="#" onclick="toggle_visibility('list1');"> 
     <p>List One</p> 
     </a> 
     <div id="list1" style="display:none;"> 
     <ul> 
      <li>Item One</li> 
      <li>Item Two</li> 
      <li>Item Three</li> 
     </ul> 
     </div> 

Answer 1

Załóżmy, to jest kod:

<a href="#" onclick="toggle_visibility('list1');"> 
    <p>List One</p> 
</a> 
<div id="list1" style="display:none;"> 
    <ul> 
    <li>Item One</li> 
    <li>Item Two</li> 
    <li>Item Three</li> 
    </ul> 
</div> 
<a href="#" onclick="toggle_visibility('list2');"> 
    <p>List Two</p> 
</a> 
<div id="list2" style="display:none;"> 
    <ul> 
    <li>Item One</li> 
    <li>Item Two</li> 
    <li>Item Three</li> 
    </ul> 
</div> 

zmienić go na to:

<a href="#" onclick="toggle_visibility('list1');"> 
    <p>List One</p> 
</a> 
<div id="list1" class="alist" style="display:none;"> 
    <ul> 
    <li>Item One</li> 
    <li>Item Two</li> 
    <li>Item Three</li> 
    </ul> 
</div> 
<a href="#" onclick="toggle_visibility('list2');"> 
    <p>List Two</p> 
</a> 
<div id="list2" class="alist" style="display:none;"> 
    <ul> 
    <li>Item One</li> 
    <li>Item Two</li> 
    <li>Item Three</li> 
    </ul> 
</div> 

i dokonać JavaScript to:

function toggle_visibility(id) { 
    var list = document.getElementsByClassName("alist"); 
    for (var i = 0; i < list.length; i++) { 
     list[i].style.display = 'none'; 
    } 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') { 
     e.style.display = 'none'; 
    } else { 
     e.style.display = 'block'; 
    } 
} 

Oto JSFiddle.

Zamiast zwykłego JavaScript do tego, proponuję użyć jQuery.

Oto w jaki sposób mogę to zrobić w jQuery:

function toggle_visibility(id) { 
    $(".list").hide(); 
    $("#" + id).toggle(); 
} 

Answer 2

Dodam jeszcze jedną funkcję, aby ukryć wszystkie listy, ale jeden bieżących:

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

    hideAllBut(id); 
} 

function hideAllBut(id) { 
    var lists = document.querySelectorAll('.list'); 
    for (var i = lists.length; i--;) { 
     if (lists[i].id != id) { 
      lists[i].style.display = 'none'; 
     } 
    } 
} 

http://jsfiddle.net/q2E5e/