使用javascript顯示/隱藏腳本

Question

我有一個用於菜單的顯示/隱藏腳本。當我點擊一個主鏈接時，它會在其下面列出一個列表。我想知道是否有辦法改變它，所以當我點擊它打開的鏈接時，但是當我點擊下一個時，它將關閉另一個，而不是將它們全部打開，除非再次單擊它以關閉。

這裏是我的腳本：

<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

假設這是你的代碼：

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

它改成這樣：

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

，使您的JavaScript這樣的：

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

這裏是JSFiddle。

而不是使用普通的JavaScript爲此，我建議你使用jQuery。

這是我會怎麼做jQuery中：

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

Answer 2

我會添加一個函數來隱藏所有的名單，但一個電流：

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/