JS/HTML - .SlideToggle 两个相邻的表格

Question

我有两个 table 彼此相邻，高度不同。我希望 tables 独立 slideToggle。

选择 table headers 时，当前没有任何反应...

fiddle：http://jsfiddle.net/wod51fvL/

欢迎大家提出意见！

HTML:

<h1>Test Heading 1</h1>
<table>
<tr>
    <td valign="top">
        <table class="tableSort">
            <thead>
                <tr>
                    <th id="clientClick" colspan="3" style="cursor:pointer;">Client</th>
                </tr>
            </thead>
            <div id="clientResult">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </div>
        </table>
    </td>
    <td valign="top">
        <table class="tableSort">
            <thead>
                <tr>
                    <th id="employeeClick" colspan="3" style="cursor:pointer;">Employee</th>
                </tr>
            </thead>
            <div id="employeeResult">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </div>
        </table>
    </td>
</tr>
</table>

JS：

var j$ = jQuery.noConflict();

j$(document).ready(function () {
j$("#clientClick").click(function () {
    j$("#clientResult").slideToggle(600);
});
});

j$(document).ready(function () {
j$("#employeeClick").click(function () {
    j$("#employeeResult").slideToggle(600);
});
});

Answer 1

一个很烂html和js

1. 您不能将 tr 标签包装成 div。
2. 您不需要调用 document.ready 函数两次

这是适合您的示例的 quick jsfiddle。需要改进（抱歉没时间）。

http://jsfiddle.net/wod51fvL/7/

$(document).ready(function () {
    $("#clientClick").click(function () {
        $("#clientResult").slideToggle(600);
    });
    $("#employeeClick").click(function () {
        $("#employeeResult").slideToggle(600);
    });
});