在HTML4中，使用CSS或javascript折叠和扩展列表的最佳方法是什么_Javascript_Html_Css

在HTML4中，使用CSS或javascript折叠和扩展列表的最佳方法是什么

javascript html css

在HTML4中，使用CSS或javascript折叠和扩展列表的最佳方法是什么,javascript,html,css,Javascript,Html,Css,我有一个列表中的一个列表中的一个列表，外部的列表是一个部分，接下来用相同的字母对项目进行分组，第三个是项目本身。我希望能够关闭/打开这些列表，我已经做了几次尝试，包括下面代码中所示的使用样式的列表，但我无法让任何东西正常工作似乎有各种方法可以做到这一点，但什么是最终的方式做到这一点。我不介意使用css或javascript，我甚至可以将文档转换为html5，如果有一种简单的方法可以实现的话。解决方案需要与最新版本的主浏览器配合使用，我不担心较旧的浏览器版本这就是我现在拥有的 <!DOC

我有一个列表中的一个列表中的一个列表，外部的列表是一个部分，接下来用相同的字母对项目进行分组，第三个是项目本身。我希望能够关闭/打开这些列表，我已经做了几次尝试，包括下面代码中所示的使用样式的列表，但我无法让任何东西正常工作

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


.行{
垂直对齐：顶部；
高度：自动！重要；
}
.名单{
显示：无；
}
.表演{
显示：无；
}
.hide:target+.show{
显示：内联；
}
.隐藏：目标{
显示：无；
}
.hide:target~.list{
显示：内联；
}
@媒体印刷品{
.隐藏，.显示{
显示：无；
}
}
小节



MusicBrainz摘要

D













E

尝试使用手风琴

从使用列表改为使用外层标题后，我已设法使其与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>


$（函数（）{
$（“手风琴”）。手风琴({
高度样式：“内容”
});
});
小节
MusicBrainz摘要
H



T



迪斯科舞厅摘要
H

您可以使用jQuery尝试类似的方法

演示：

说明：

使用手风琴

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

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

HTML

部分
MusicBrainz摘要
H



T



迪斯科舞厅摘要
H

您是否查阅了有关Accordion或atleat Jquery切换方法的jqueryui文档？您希望支持哪些版本的IE？我很确定最简单的方法是使用Jquery。恐怕我不能举个例子。试试你找到的方法，当它们坏了再回来。“那个时候你们应该问一下。”考希甘地手风琴看起来很不错，而且我也有点用得上。它只适用于一个部分，但我无法将其用于后续部分，它只能在html文件中使用一次。感谢您提供的示例，但我必须承认，首先我不认为它有效，因为您没有任何视觉提示来指示您可以折叠部分，就这样，你似乎只能折叠Musicbrainz部分，而不能折叠其中的D和E部分。我也不知道；I don’我真的不明白它是怎么工作的useful@PaulTaylor查看解释链接。谢谢，但仍然没有太多的意义，我正在尝试使用手风琴代替，这似乎有点抛光。你可以在一页上有任何数量的手风琴。这是强制性的，有一个Div和前往手风琴工作。阅读这里你能看到我上面发布的页面有什么问题吗？因为它只适用于Musicbrainz部分，而不适用于Discogs部分

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

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

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

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