我怎样才能使一个表部分隐藏，然后单击

Question

这里后显示我在做什么...点击这里给按钮时，其分类表显示有关细节深藏不露，CSS正在为我好，问题是，当我点击在按钮上显示tbody没有任何反应，不能得到它的问题。对我的代码来看看..

的CSS使他隐藏的，除非他是不是点击，

.down1 { 
     display: none; 
    } 

$(document).ready(function(){ 
    $("#show1").click(function(){ 
     $(".down1").toggle(); 
    }); 
}); 

<table align="center" cellpadding="10" width="300"> 
    <tr> 
     <th bgcolor="brown"></th> 
     <th bgcolor="brown">Day</th> 
    <tr> 
     <td align="center" bgcolor="lightgrey"> 
      <input type="button" value="+" id="show1" /> 
     </td> 
     <td align="center" bgcolor="lightgrey">Monday</td> 
     <tbody class="down1"> 
    <tr> 
     <td> 
      <input type="checkbox" /> 
     </td> 
     <td>9:00 -10:00 (time) </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" /> 
     </td> 
     <td>9:00 -10:00 (time)</td> 
    </tr>  
    <tr> 
     <td> 
      <input type="checkbox" /> 
     </td> 
     <td>9:00 -10:00 (time)</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" /> 
     </td> 
     <td>9:00 -10:00 (time)</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" /> 
     </td> 
     <td>9:00 -10:00 (time)</td> 
    </tbody> 
    </tr> 
    </tr> 
</table> 

Answer 1

这EXA mple可以帮助你：Example

$(document).ready(function(){ 
    $("#show1").click(function(){ 
    $(".down1").toggle(); 
    if ($(this).val() == '+') { 
     $(this).val('-'); 
    } else $(this).val('+'); 
    }); 
    }); 

Answer 2

不知道，但这个你想要什么？

的jsfiddle：

http://jsfiddle.net/yoy5xph3/1/

$(".down1").toggle(); 

$("#show1").click(function(){ 
    $(".down1").toggle(); 
}); 

我删除了CSS和在开始切换的.down1所以它隐藏。

Answer 3

可以显示我的DEMO CODE

它的工作

jQuery的

$(document).ready(function(){ 
     $("#show1").click(function(){ 
     $(".down1").toggle(); 
     if ($(this).val() == '+') { 
      $(this).val('-'); 
     } else $(this).val('+'); 
    }); 
}); 

标记

<tbody class="down1"> 
     <tr> 
      <td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td> 
     </tr> 
</tbody>