jquery - 在 jQuery 中展开相互独立的选项卡

Question

我有 3 个表；当您单击其中一个的角时，所有 3 个都会展开。我希望他们独立扩展。我怎样才能做到这一点？

这是我的代码:

$(document).ready(function () {
    $(".flip").click(function () {
        $(".panel").slideToggle("fast");
    });
});

table {
    margin-bottom: 1em;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #fff;
}
table th, table td {
    border: 1px solid #ccc;
    padding: 0.5em;
}
thead tr th {
    background-color: #00745e;
    color: white;
    font-size: 14px;
}
table tr th img {
    float: right;
}
table td {
    font-size: 12px;
}
.panel {
    display: none;
}
.flip {
}
.toggle {
    display: block;
    float: right;
    background-image: url('../EPL-Static/images/soccer.png');
    height: 20px;
    width: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-grid  grid_item">
    <thead>
        <tr>
            <th colspan="9">Chelsea vs Manchester United <a href="#" class="toggle flip"></a>

            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">EPL1</td>
            <td colspan="3">NGN</td>
            <td colspan="3">Tick</td>
        </tr>
        <tr>
            <td colspan="9" class="panel">
                <p>expand info</p>
            </td>
        </tr>
    </tbody>
</table>
<!-- Box 2 -->
<table class="table-grid  grid_item">
    <thead>
        <tr>
            <th colspan="9">Arsenal vs Tottenham Hospur <a href="#" class="toggle flip"></a>

            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">EPL2</td>
            <td colspan="3">NGN</td>
            <td colspan="3">Tick</td>
        </tr>
        <tr>
            <td colspan="9" class="panel">
                <p>expand info</p>
            </td>
        </tr>
    </tbody>
</table>
<!-- Box 3 -->
<table class="table-grid  grid_item">
    <thead>
        <tr>
            <th colspan="9">Liverpool vs Sunderland United <a href="#" class="toggle flip"></a>

            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">EPL1</td>
            <td colspan="3">NGN</td>
            <td colspan="3">Tick</td>
        </tr>
        <tr>
            <td colspan="9" class="panel">
                <spam>expand info</span>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

您需要在当前表的上下文中找到.panel。所以需要先找到父表:

$(".flip").click(function () {
    $(this).closest("table").find(".panel").slideToggle("fast");
});

演示:http://jsfiddle.net/vqm0aL9q/