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

在DOM上ID必须是唯一的。

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

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

Updated Fiddle

Answer 4

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

更正的HTML panel和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");
  });
});

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

4 个答案: