如何在對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/