リスト内のリスト内にリストがあり、外側のリストは section で、次は同じ文字のアイテムをグループ化し、3 番目はアイテム自体です。これらのリストを閉じたり開いたりできるようにしたいのですが、スタイルを使用して以下のコードに示すものを含むいくつかの試みを行いましたが、何も機能しません。
方法はいろいろあるようですが、確実な方法は何ですか？css や javascript を使用してもかまいません。簡単な方法があれば、ドキュメントを html5 に変換することもできます。このソリューションは、メイン ブラウザの最新バージョンで動作する必要があります。古いバージョンのブラウザについては心配していません。
これは私が現在持っているものです
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="songkong.css">
<base target="main">
<style type="text/css">
.row {
vertical-align: top;
height:auto !important;
}
.list {
display:none;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
@media print {
.hide, .show {
display: none;
}
}
</style>
</head>
<body>
<h1>Sections</h1>
<ul>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_summary.html#Summary">Summary</a>
</li>
<li>MusicBrainz Summary
<ul>
<li>D
<ul>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_musicbrainz_Daniel Desnoyers.html">Daniel Desnoyers</a>
</li>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_musicbrainz_David Guetta.html">David Guetta</a>
</li>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_musicbrainz_Dev Electric.html">Dev Electric</a>
</li>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_musicbrainz_Diddy - Dirty Money.html">Diddy - Dirty Money</a>
</li>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_musicbrainz_Drake.html">Drake</a>
</li>
</ul>
</li>
<li>E
<ul>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_musicbrainz_E-40.html">E-40</a>
</li>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_musicbrainz_Eagles.html">Eagles</a>
</li>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_musicbrainz_Ed Sheeran.html">Ed Sheeran</a>
</li>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_musicbrainz_Elton John.html">Elton John</a>
</li>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_musicbrainz_Eminem.html">Eminem</a>
</li>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_musicbrainz_Enrique Iglesias.html">Enrique Iglesias</a>
</li>
</ul>
</li>
</ul>
</li>
</body>
</html>
アコーディオンで試す
リストの使用から外側のレイヤーの見出しの使用に変更した後、Musicbrainz の要約を使用してレターを機能させることができましたが、Discogs の要約内のセクションで繰り返しても効果はありません。Accordianはファイル内で 1 回しか使用できません?
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="songkong.css">
<base target="main">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
</script></head>
<body>
<h1>Sections</h1>
<h2><a href="FixSongsReport_00042_2013-09-01-18-44-47_summary.html#Summary">Summary</a></h2>
<h2>MusicBrainz Summary</h2>
<div id="accordion">
<h3>H</h3>
<div>
<ul>
<li><a href="FixSongsReport_00042_2013-09-01-18-44-47_musicbrainz_Hans Zimmer.html">Hans Zimmer</a></li>
</ul>
</div>
<h3>T</h3>
<div>
<ul>
<li><a href="FixSongsReport_00042_2013-09-01-18-44-47_musicbrainz_The Zombies.html">The Zombies</a></li>
</ul>
</div>
</div>
<h2>Discogs Summary</h2>
<div id="accordion">
<h3>H</h3>
<div>
<ul>
<li><a href="FixSongsReport_00042_2013-09-01-18-44-47_discogs_Hans Zimmer.html">Hans Zimmer</a></li>
</ul>
</div>
</div>
</body>
</html>