我想要一张可展开或折叠的桌子。我的要求是，当我单击表格行然后显示隐藏行时，或者当我单击其他表格行然后单击之前的打开行隐藏或显示相对隐藏行时。我发现一个对我来说完美的jquery jxpand它显示隐藏行，但是当我单击其他行时，先前的隐藏数据保持打开状态，而不是隐藏，我希望先前的隐藏或显示新的相关行隐藏数据。我的代码段如下
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#52edc7; cursor:pointer; }
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id="report">
<tr>
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
<th></th>
</tr>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
<li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
<li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
</ul>
</td>
</tr>
<tr>
<td>United Kingdom </td>
<td>61,612,300</td>
<td>244,820 km2</td>
<td>English</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_the_United_Kingdom.svg.png" alt="Flag of UK" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/United_kingdom">UK on Wikipedia</a></li>
<li><a href="http://www.visitbritain.com/">Official tourist guide to Britain</a></li>
<li><a href="http://www.statistics.gov.uk/StatBase/Product.asp?vlnk=5703">Official
Yearbook of the United Kingdom</a></li>
</ul>
</td>
</tr>
<tr>
<td>India</td>
<td>1,147,995,904</td>
<td>3,287,240‡ km2</td>
<td>Hindi, English</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_India.svg.png" alt="Flag of India" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/India">India on Wikipedia</a></li>
<li><a href="http://india.gov.in/">Government of India</a></li>
<li><a href="http://wikitravel.org/en/India">India travel guide</a></li>
</ul>
</td>
</tr>
<tr>
<td>Canada</td>
<td>33,718,000</td>
<td>9,984,670 km2</td>
<td>English, French</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_Canada.svg.png" alt="Flag of Canada" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Canada">Canada on Wikipedia</a></li>
<li><a href="http://atlas.gc.ca/site/index.html" >Official
Government of Canada online Atlas of Canada</a></li>
<li><a href="http://wikitravel.org/en/Canada">Canada travel guide</a></li>
</ul>
</td>
</tr>
<tr>
<td>Germany</td>
<td>82,060,000</td>
<td>357,021 km2</td>
<td>German</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_Germany.svg.png" alt="Flag of Germany" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Germany">Germany on Wikipedia</a></li>
<li><a href="http://www.deutschland.de/home.php?lang=2">Deutschland.de Official Germany portal</a></li>
<li><a href="http://www.cometogermany.com/">Germany Travel Info</a></li>
</ul>
</td>
</tr>
</table>
<em>* Information taken from Wikipedia</em>例如，如果查看英国隐藏数据然后打开加拿大隐藏数据英国打开数据将再次隐藏并且加拿大数据将打开
最佳答案
只需在点击功能中添加$("#report tr:not(.odd)").hide();。
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function () {
$("#report tr:not(.odd)").hide();
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
JsFiddle
编辑
基于注释-我们可以隐藏当前选定的元素，如下所示：
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function () {
var trToToggle = $(this).next("tr");
$("#report tr:not(.odd)").not(trToToggle).hide();
$(trToToggle).toggle();
$(this).find(".arrow").toggleClass("up");
});
编辑jsFiddle here