Jquery 手风琴 html 表一次显示一个 <tbody> 内容答案

【问题标题】：Jquery accordion html table showing one <tbody> content at a timeJquery 手风琴 html 表一次显示一个 <tbody> 内容
【发布时间】：2016-04-07 18:58:25
【问题描述】：

当用户点击表格标题时，我想一次只显示一个 tbody 内容

我在一个 html 文档中有四个表，默认情况下显示第一个表的内容，当用户单击另一个标题时，原始 tbody> 内容保持打开状态，直到用户单击该标题我正在努力寻找解决方案，以便当用户单击新标题时，仅显示该标题的内容

这是我的 html 和 jquery 代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Accordion table</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
  $(function() {
  $("tbody:not(.first)").hide();
  $("table thead tr th").click(function(){
  $(this).parents('table') .children('tbody').fadeToggle("fast");
    });
  });
</script>
</head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">President</th>
    </tr>
  </thead>
  <tbody class="first">
    <tr>
      <td>Archdeacon  Bathurst</td>
      <td>1882 &#8211; 1910</td>
    </tr>
    <tr>
      <td>Rev W W C Baker</td>
      <td>1910 &#8211; 1929</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Vice President</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anthony H Smith</td>
      <td>1988 &#8211; 1991</td>
    </tr>
    <tr>
      <td>John R Pemble</td>
      <td>1991 &#8211; 1994</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Honorary Secretary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mr C Hertbert</td>
      <td>1882 &#8211; 1887</td>
    </tr>
    <tr>
      <td>Rev W W C Baker</td>
      <td>1887 &#8211; 1895</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Honorary Treasurer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mr T G Elger</td>
      <td>1882 &#8211; 1895</td>
    </tr>
    <tr>
      <td>Mr T Bull</td>
      <td>1895 &#8211; 1907</td>
    </tr>
  </tbody>
</table>
</body>
</html>

【问题讨论】：

标签： javascript jquery html jquery-ui

【解决方案1】：

您需要在显示当前项目后隐藏所有其他 tbody 元素

$(function() {
  $("tbody:not(.first)").hide();
  $("table thead tr th").click(function() {
    var $tbody = $(this).closest('table').children('tbody').fadeToggle("fast");
    $("tbody").not($tbody).fadeOut('fast');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">President</th>
    </tr>
  </thead>
  <tbody class="first">
    <tr>
      <td>Archdeacon Bathurst</td>
      <td>1882 &#8211; 1910</td>
    </tr>
    <tr>
      <td>Rev W W C Baker</td>
      <td>1910 &#8211; 1929</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Vice President</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anthony H Smith</td>
      <td>1988 &#8211; 1991</td>
    </tr>
    <tr>
      <td>John R Pemble</td>
      <td>1991 &#8211; 1994</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Honorary Secretary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mr C Hertbert</td>
      <td>1882 &#8211; 1887</td>
    </tr>
    <tr>
      <td>Rev W W C Baker</td>
      <td>1887 &#8211; 1895</td>
    </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th colspan="2" scope="col">Honorary Treasurer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mr T G Elger</td>
      <td>1882 &#8211; 1895</td>
    </tr>
    <tr>
      <td>Mr T Bull</td>
      <td>1895 &#8211; 1907</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

这应该可行：

  $(function() {
    $("tbody:not(.first)").hide();
    $("table thead tr th").click(function() {
      $("tbody").hide();
      $(this).parents('table').children('tbody').fadeToggle("fast");
    });
  });

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Accordion table</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>
  <table width="100%" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th colspan="2" scope="col">President</th>
      </tr>
    </thead>
    <tbody class="first">
      <tr>
        <td>Archdeacon Bathurst</td>
        <td>1882 &#8211; 1910</td>
      </tr>
      <tr>
        <td>Rev W W C Baker</td>
        <td>1910 &#8211; 1929</td>
      </tr>
    </tbody>
  </table>
  <table width="100%" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th colspan="2" scope="col">Vice President</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Anthony H Smith</td>
        <td>1988 &#8211; 1991</td>
      </tr>
      <tr>
        <td>John R Pemble</td>
        <td>1991 &#8211; 1994</td>
      </tr>
    </tbody>
  </table>
  <table width="100%" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th colspan="2" scope="col">Honorary Secretary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mr C Hertbert</td>
        <td>1882 &#8211; 1887</td>
      </tr>
      <tr>
        <td>Rev W W C Baker</td>
        <td>1887 &#8211; 1895</td>
      </tr>
    </tbody>
  </table>
  <table width="100%" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th colspan="2" scope="col">Honorary Treasurer</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mr T G Elger</td>
        <td>1882 &#8211; 1895</td>
      </tr>
      <tr>
        <td>Mr T Bull</td>
        <td>1895 &#8211; 1907</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：