如何在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有很多，你可以使用像淡出和东西的影响。