jquery - 无法在切换中显示所有单元格

Question

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").toggle(1000);
  });
});

链接到 jsfiddle http://jsfiddle.net/T8t2r/301/

Answer 1

问题是它id在你的 DOM 上必须是唯一的，并且你有多个具有相同 id 的元素。这是无效的，会导致您看到的效果：仅切换第一个。

改用 css 类

HTML

<tr class="parent">
    <td><div class="flip">Cash and Equivalents</div></td>
    <td><div class="flip">000,000</div></td>
    <td><div class="flip">000,000</div></td>
    <td><div class="flip">000,000</div></td>

</tr>
<tr class="child">
    <td><div class="panel">Cash and Equivalents</div></td>
    <td><div class="panel">asdasdasd000,000</div></td>
    <td><div class="panel">000,000</div></td>
    <td><div class="panel">000,000</div></td>
</tr>

JS

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").toggle(1000);
  });
});

在我看来，这可能会更简单，但我需要知道你想要做什么

Answer 2

您应该使用class属性而不是id. 该id属性是一个单一的、唯一的选择器，并且不能多次使用。我已经更改了您的代码并在此处更新了您的小提琴：http: //jsfiddle.net/T8t2r/302/以使其正常工作。

Answer 3

Id 在 DOM 上必须是唯一的。

为了获得所需的功能，像 class在 html 中一样更改翻转并使用class选择器。

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

更新小提琴

Answer 4

这是小提琴：http: //jsfiddle.net/NgTQL/

更正了 HTMLpanel并flip更改为一个类：

<table id="mytable" border='1'>
    <thead>
        <tr>
            <th>Year</th>
            <th>Revenue</th>
            <th>Expense</th>
            <th>Profit</th>
        </tr>
    <tbody>

    <tr class="parent">
        <td><div class="flip">Cash and Equivalents</div></td>
        <td><div class="flip">000,000</div></td>
        <td><div class="flip">000,000</div></td>
        <td><div class="flip">000,000</div></td>

            </tr>

    <tr class="child">
        <td><div class="panel">Cash and Equivalents</div></td>
        <td><div class="panel">asdasdasd000,000</div></td>
        <td><div class="panel">000,000</div></td>
        <td><div class="panel">000,000</div></td>
    </tr>
 </tbody>
</table>

jQuery：

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