包含文件引用的HTML可折叠列表

Question

我是新来的，有一个关于html中可折叠列表的问题。我需要在学校网站页面上编写一个可折叠列表，其中包含"会议纪要"one_answers"议程"(它们只是上传到网站的pdf文件)。

我的任务是把它们都放在一个可折叠的列表中，这样页面就不会变得无限冗长。我们每个月都会添加一个新的"分钟"pdf和一个新的"议程"pdf，所以我只会编辑代码以包含新文件。

我已经创建了一个下拉菜单与参考网站和一个去按钮，但从来没有去一个可折叠的列表。我想我会有两个标题(一个是会议纪要，一个是议程)，然后你点击其中任何一个，所有的pdf文档都会按时间顺序显示。

如果你点击pdf链接，它应该下载，因为这就是它现在在页面上的样子。我试图尽可能详细地说明我正在努力完成的任务。

新编辑这是我到目前为止4月23日所做的:

<script type="text/javascript">
//<![CDATA[
function toggle(divName){
if(document.getElementById)
{
var theDiv = document.getElementById(divName);
if(theDiv)
{
if(theDiv.style.display == 'none')
{
theDiv.style.display = 'block';
}
else
{
theDiv.style.display = 'none';
}
}
}
}
//]]>
</script>
<ul>
<li><a href="javascript:toggle('Minutes')">Advisory Board Minutes</a>
<ul id="Minutes">
<li><a href="http://www.cnn.com">Advisory Board Minutes 1</li></a>
<li>Advisory Board Minutes 2</li>
<li>Advisory Board Minutes 3</li>
</ul>
</li>
<li><a href="javascript:toggle('Agendas')">Advisory Board Agendas</a>
<ul id="Agendas">
<li>Advisory Board Agenda 1</li>
<li>Advisory Board Agenda 2</li>
<li>Advisory Board Agenda 3</li>
</ul>
</li>
</ul>

现在我的问题是我如何使列表'折叠'不'扩展'当页面加载，因为它显示已经'扩展'现在?此外，我如何将会议纪要或议程(即会议纪要)内部的元素联系起来。咨询委员会会议记录1，而不是http://www.ccn.com我可以只输入文件的名称和扩展名，这样当你点击它，它会开始下载)

Answer 1

如果您可以使用jQuery，这实际上不是什么大问题。
像这样:

$('#Minutes > li').click(function() {
    $('#Minutes ul').not($(this).find('ul')).stop(true,true).slideUp();
    $(this).find('ul').stop(true,true).slideDown(); list item
});

我在每行所做的事情中包含了注释。http://jsfiddle.net/tgs2x/

Answer 2

您也可以将.show()和.hide()的jQuery方法用于.click(function()。