如何在td元素上執行onclick時顯示/隱藏div

Question

我試圖在表中點擊<td>來隱藏/顯示div。表格包含兩個<div> s，並在點擊主帳戶持有人<td>時應考慮顯示第一個div，而其他div處於隱藏狀態。對於授權重新訂購，<td>，應顯示相應的div。

我的HTML是

<div id="authreport"> 
<table width="270"> 
    <tr> 
     <td>First name:</td> 
    </tr> 
    <tr> 
     <td>Last name:</td> 
    </tr> 
    <tr> 
     <td>Mobile phone:</td> 
    </tr> 
    <tr> 
     <td>Email:</td><td> 
    <tr> 
     <td>Password:</td> 
    </tr> 
</table> 
</div> 

<div id="mainacc"> 
    <table> 
     <tr> 
      <td colspan="2"><h3>Work details</h3></td> 
     </tr> 
     <tr> 
      <td>Organisation:</td> 
     </tr> 
     <tr> 
      <td>Industry Type:</td> 
     <tr> 
      <td>Street:</td> 
     </tr> 
     <tr> 
      <td>Postcode:</td> 
     </tr> 
     <tr> 
      <td>Country:</td> 
     </tr> 
    </table> 
</div>  

我的JavaScript是

function authorised_reporter(auth){ 
var button = document.getElementById('auth') 

auth.onclick = function() { 
var div = document.getElementById('authreport'); 
    if (div.style.display !== 'none') { 
     div.style.display = 'none'; 
    } 
    else { 
     div.style.display = 'block'; 
    } } 
}; 

任何一個可以給我如何做到這一點的想法？

Answer 1

如果我的理解正確，您要達到的目標就像accordion。你可能想看到這個。

http://jqueryui.com/accordion/

Answer 2

你應該保持這個偉大的教程頁面上的眼睛： http://www.w3schools.com/jquery/jquery_hide_show.asp。

W3School是一個很棒的教程網站（從我的角度來看是最好的），並且該頁面向您展示了一個使用JQuery框架的示例，它是頁面中的「必須包含」源代碼，因爲它提供了非常好的幫助常見的（也是更復雜的）Javascript函數。 http://jquery.com/ 。最好問候

Answer 3

如果你使用JQuery，那很簡單。

$('#DivID').click(function(){ 
    //You can use show(), hide(), or toggle()   
    $('#DivID').toggle(); 
}); 

• http://api.jquery.com/toggle/
• http://api.jquery.com/show/
• ​​

如果您瀏覽的jQuery API有很多，你可以使用像淡出和東西的影響。