Jquery手风琴html表显示了一个<tbody>内容

Jquery accordion html table showing one <tbody> content at a time

本文关键字：lt 一个 tbody 内容 gt html 手风琴 显示 Jquery      更新时间：2024-02-26

当用户点击表头时，我想一次只显示一个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>

显示当前项目后，您需要隐藏所有其他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>

这应该有效：

  $(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>

相关文章：