Skript mit Javascript anzeigen/verbergen

Question

Ich habe ein show/hide-Skript, das ich für ein Menü verwende. Wenn ich auf einen Hauptlink klicke, erscheint darunter eine Liste. Ich habe mich gefragt, ob es eine Möglichkeit gibt, es ein wenig zu ändern, so dass wenn ich auf den Link klicke öffnet es sich, aber wenn ich auf den nächsten klicke, schließt es den anderen statt sie alle offen zu lassen, außer du klickst es nochmal um zu schließen.

<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

Angenommen, dies ist Ihr Code:

es

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

Ändern Sie diese an:

Hier mein Skript ist

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

und machen Sie Ihren JavaScript dies:

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'; 
    } 
} 

Hier ist ein JSFiddle.

Statt Ebene JavaScript für diese zu verwenden, schlage ich vor, Sie jQuery verwenden.

Hier ist, wie ich es in jQuery tun würde:

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

Answer 2

Ich würde eine weitere Funktion fügen Sie alle Listen zu verstecken, aber ein Strom:

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/