如何在对td元素执行onclick时显示/隐藏div

Question

我试图在单击表中的<td>时隐藏/显示div。 该表包含两个<div> ，并在单击主帐户持有人<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

您应该关注这个很棒的教程页面： http : //www.w3schools.com/jquery/jquery_hide_show.asp 。

W3School是一个很棒的教程网站（从我的角度来看，这是最好的），并且此页面向您展示了一个使用JQuery框架的示例，该示例在页面中是“必须包含”的源代码，因为它为通用（以及更多内容）提供了很好的帮助者复杂）的Javascript函数。 http://jquery.com/最好的问候

Answer 2

如果使用JQuery，则非常简单。

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

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

如果您浏览jquery API，则可以使用很多效果，例如淡出和填充。

Answer 3

如果我对您的理解正确，那么您想要实现的目标就像accordion 。 您可能想看看这个。

http://jqueryui.com/accordion/