не в состоянии показать все клетки тумблера

Question

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

ссылку jsfiddle http://jsfiddle.net/T8t2r/301/

Answer 1

Проблема заключается в том, что id должен быть уникальным в DOM и у вас есть несколько элементов с одинаковыми идентификаторами. Это неверно и вызовет эффект, который вы видите: только переключите первый.

Используйте 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); 
    }); 
}); 

Мне кажется, что это может быть гораздо проще, хотя, но мне нужно знать, что вы пытаетесь сделать exaccty

Answer 2

Вы должны использовать атрибут class вместо id. Атрибут id предназначен для одиночного уникального селектора и не предназначен для использования более одного раза. Я изменил ваш код и обновил вашу скрипку здесь: http://jsfiddle.net/T8t2r/302/, чтобы он работал правильно.

Answer 3

Идентификатор должен быть уникальным на DOM.

Чтобы получить требуемую функциональность, измените флип как class в html и используйте 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"); 
    }); 
});