Javascript Jquery手风琴html表，显示一个<；t车身>；一次满足_Javascript_Jquery_Html_Jquery Ui

Javascript Jquery手风琴html表，显示一个<；t车身>；一次满足

javascript jquery html jquery-ui

Javascript Jquery手风琴html表，显示一个<；t车身>；一次满足,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,当用户单击表头时，我希望一次只显示一个tbody内容我在一个html文档中有四个表，默认情况下，当用户单击另一个标题时，第一个表的内容会显示。在用户单击该标题之前，原始的tbody>content保持打开状态。我正在努力寻找解决方案，以便当用户单击新标题时，只显示该标题的内容这是我的html和jquery代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="

当用户单击表头时，我希望一次只显示一个tbody内容

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

这是我的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:not（.first）”）.hide（）；
$（“表THAD tr th”）。单击（函数（）{
$（此项）。父项（'table'）。子项（'tbody'）。fadeToggle（'fast'）；
});
});
主席:
巴瑟斯特大执事
1882 – 1910
贝克版次
1910 – 1929
副总裁
安东尼·史密斯
1988 – 1991
约翰·R·彭布尔
1991 – 1994
名誉秘书
赫伯特先生
1882 – 1887
贝克版次
1887 – 1895
名誉司库
艾尔格先生
1882 – 1895
T Bull先生
1895 – 1907

显示当前项目后，您需要隐藏所有其他

t正文

元素

$（函数（）{
$（（“tbody:not（.first）”）.hide（）；
$（“表THAD tr th”）。单击（函数（）{
var$tbody=$（this）.closest（'table'）.children（'tbody'）.fadeToggle（“fast”）；
$（“tbody”）.not（$tbody）.fadeOut（'fast'）；
});
});

主席:
巴瑟斯特大执事
1882 – 1910
贝克版次
1910 – 1929
副总裁
安东尼·史密斯
1988 – 1991
约翰·R·彭布尔
1991 – 1994
名誉秘书
赫伯特先生
1882 – 1887
贝克版次
1887 – 1895
名誉司库
艾尔格先生
1882 – 1895
T Bull先生
1895 – 1907
这应该可以：

$（函数（）{
$（（“tbody:not（.first）”）.hide（）；
$（“表THAD tr th”）。单击（函数（）{
$（“tbody”）.hide（）；
$（此项）。父项（'table'）。子项（'tbody'）。fadeToggle（'fast'）；
});
});

手风琴桌
主席:
巴瑟斯特大执事
1882 – 1910
贝克版次
1910 – 1929
副总裁
安东尼·史密斯
1988 – 1991
约翰·R·彭布尔
1991 – 1994
名誉秘书
赫伯特先生
1882 – 1887
贝克版次
1887 – 1895
名誉司库
艾尔格先生
1882 – 1895
T Bull先生
1895 – 1907