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

【问题标题】：How Can i make a table section hidden and display after click单击后如何隐藏并显示表格部分
【发布时间】：2014-11-25 10:03:48
【问题描述】：

这就是我正在做的......它的分类表，当单击按钮时显示有关否则保持隐藏的详细信息，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>

【问题讨论】：

你必须更正：.down { display:none; } 到 .down1 { display:none; }
抱歉我的错误是.down1 css 运行良好，jquery 无法运行
您的 HTML 存在很多语法问题；未关闭的tr，以及错误放置的tr 和tbody。
是的，他们肯定是错误，我会修复它..

标签： javascript jquery html css

【解决方案1】：

这个例子可以帮助你：Example

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

【讨论】：

【解决方案2】：

不确定，但这是您想要的吗？

JSfiddle：

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

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

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

我删除了 css 并在开始时切换了 .down1 以便它隐藏。

【讨论】：

是的，这就是我想要的

【解决方案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>

【讨论】：

是的，我正在尝试做同样的事情