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

不确定但这是你想要的吗？

的jsfiddle：

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

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

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

我删除了css并在开始时将.down1切换为隐藏。

Answer 2

您可以展示我的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>

Answer 3

此示例可以帮助您：Example

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

如何隐藏表格部分并在单击后显示

3 个答案: