0

我在一个列表中的列表中有一个列表,外部列表是一个 section ,下一组具有相同字母的项目,第三个是项目本身。我希望能够关闭/打开这些列表,我进行了几次尝试,包括下面代码中使用样式显示的尝试,但我无法得到任何工作。

似乎有多种方法可以做到这一点,但最终的方法是什么。我不介意使用 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 一次吗?

<!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>
4

1 回答 1

1

您可以使用 jQuery 尝试这样的事情

演示:http: //jsbin.com/iZOsaVU/1/

<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<h1>Sections</h1>
<ul>
<li><a href="FixSongsReport_00022_2013-09-01-10-16-49_summary.html#Summary">Summary</a></li>
  <li id='li1'>MusicBrainz Summary</li>
  <div id='ct'>
  <ul id='ul1'>
<li id="l1-1">D
<ul id='ul1-1-1'>
    <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>
    </div>
    </ul>

jQuery:您也可以对其他列表项使用相同的技巧。

$("#li1").click(function(){
  $("#ct").toggle("fold",1000);
});

说明:http ://codewithlogic.wordpress.com/2013/09/01/creating-tree-view-in-jquery/

使用手风琴

$( "#accordion" ).accordion({
heightStyle: "content",
    collapsible:true

});
$( "#accordion1" ).accordion({
heightStyle: "content",
  collapsible:true
});

HTML

  <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="accordion1">
<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>
于 2013-09-01T09:52:15.317 回答