Question

在html中，我使用<table><tr><td>来显示行数，每行代表一个相册，然后每行之间是另一个<tr>行，其中包含一个<td>行， turn包含一个<div>，样式为：none。此行包含上面一行中相册的曲目列表，可以通过单击相册行上的按钮切换显示与否。

麻烦的是，即使div被隐藏，它占据垂直高度，我认为这是<tr><td>的高度，但我该如何解决这个问题。或者另一个想法可以隐藏<tr>或者我只能为div做这个。

（请注意，代码显示这也包含在Accordion div中，但这与问题无关）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/style/songkong.css">
<script type="text/javascript" src="/style/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/style/jquery/ui/js/jquery-ui-1.9.2.custom.js"></script>
<link rel="stylesheet" href="/style/jquery/ui/css/smoothness/jquery-ui-1.9.2.custom.css" />
<style>
table {
width:100%;
}
th, td {padding: 5px;text-align: left;}
</style>
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<script>
    $(function () {
    $("#accordion0").accordion({
        active: false, 
        collapsible: true,
        heightStyle: "content"
    });
});</script>
<script>
    $(function () {
    $("#accordion1").accordion({
        active: false, 
        collapsible: true,
        heightStyle: "content"
    });
});</script>
<script>
    $(function () {
    $("#accordion2").accordion({
        active: false, 
        collapsible: true,
        heightStyle: "content"
    });
});</script>
</head>
<body>
<p>Lists all releases by  <b>Farming Incident</b> (<a href="http://musicbrainz.org/artist/4302e264-1cf0-4d1f-aca7-2a6f89e34b36">4302e264-1cf0-4d1f-aca7-2a6f89e34b36</a>) where they are credited as the album artist.</p>
<!-- ReleaseGroupType:Album-->
<h3>Album</h3>
<div id="accordion1">
<!-- ReleaseGroupHeader:Our Glorious 5 Year Plan-->
<table><tr>
<td width="60">2005</td>
<td width="400"><a href="http://musicbrainz.org/release-group/30562779-7740-3b74-8a72-d3ba6cf8e80d"target="_blank"title="View MusicBrainz Release Group">Our Glorious 5 Year Plan</a>
</td>
<td>1&nbsp;<img src="/images/mb_32.png"/></td>
<td>linked to 0&nbsp;<img src="/images/discogs_32.png"/></td>
<td>found possible links for 0&nbsp;<img src="/images/discogs_32.png"/></td>
<td>Additional 0&nbsp;<img src="/images/discogs_32.png"/>
</td></tr></table>
<!-- ReleaseGroup:Our Glorious 5 Year Plan-->
<div>
<p>
<!-- ReleaseGroupTableHeader:Our Glorious 5 Year Plan-->
<table><tr><td><a href="http://musicbrainz.org/release-group/30562779-7740-3b74-8a72-d3ba6cf8e80d"title="Open album in MusicBrainz"target="_blank"><img src="../../images/mb_32.png"/></a>
</td></tr></table>
<table><tr><td colspan="12"><b>MusicBrainz Releases where no link to Discogs have been found</b></td></tr>
<tr><th width="60">Actions</th>
<th width="60">Year</th>
<th width="200">Title</th>
<th width="50">Country</th>
<th width="100">Format</th>
<th width="120">Label</th>
<th width="100">Cat no</th>
<th width="200"></th>
<th width="50"></th>
<th width="100"></th>
<th width="120"></th>
<th width="100"></th>
</tr>
<!-- Release Header:1d9e8ed6-3893-4d3b-aa7d-6cd79609e386-->
<tr><td width="100"><input type="button" onclick="return toggleMe('1')" value="Tracks"></td>
<td width="20"><img src="/images/mb_32.png"/></td>
<td width="60">2005</td>
<td width="200"><a href="http://musicbrainz.org/release/1d9e8ed6-3893-4d3b-aa7d-6cd79609e386"target="_blank"title="View MusicBrainz release">Our Glorious 5 Year Plan</a>
</td>
<td width="50"><img src="/images/flags/flags-iso/shiny/32/GB.png"/></td>
<td width="100">CD</td>
<td width="120">Wrath Records</td>
<td>WRATHCD25</td></tr>

<!-- Release:1d9e8ed6-3893-4d3b-aa7d-6cd79609e386-->
<tr><td colspan="11"><div id="1" style="display:none"><p>CD</p>
<table>
<tr><th>#</th><th>Title</th><th>Duration</th></tr>
<tr><td>1</td><td>Complicity</td><td>3:21</td></tr>
<tr><td>2</td><td>When Your Political Ideology Has Gone Out of Fashion...</td><td>1:43</td></tr>
<tr><td>3</td><td>Hyde Park</td><td>4:09</td></tr>
<tr><td>4</td><td>The Harder You Fall, the Better Life Gets</td><td>2:49</td></tr>
<tr><td>5</td><td>The Equaliser</td><td>5:37</td></tr>
<tr><td>6</td><td>Gravitational Lenz</td><td>3:54</td></tr>
<tr><td>7</td><td>Mars Tranquilum</td><td>6:32</td></tr>
<tr><td>8</td><td>Sputnik 8 Ace</td><td>4:52</td></tr>
<tr><td>9</td><td>The Flute of Shame</td><td>2:15</td></tr>
<tr><td>10</td><td>Rostov</td><td>7:00</td></tr>
</table>
</div></td>
</tr>
</table>
</div>
</body></html>

Answer 1

没有HTML，我们无法帮助您。

但是，您确实可以在display: none元素上应用<tr>来隐藏它。

当div具有样式时，如何使包含<div>不使用空格：隐藏</div>

1 个答案: