Question

我是新来的，并且在html中有关于可折叠列表的问题。我需要在学校网站页面上编写一个可折叠列表，其中包含“Minutes”和“Agendas”的集合（它们只是已经上传到网站的pdf文件）。

我的任务是将它们全部放在可折叠列表中，这样页面就不会无限期地变长。我们将每月添加一个新的“Minute”pdf和一个新的“Agenda”pdf，所以我将编辑代码以包含新文件。

我创建了一个下拉菜单，其中包含对网站和go按钮的引用，但从未涉及可折叠列表。我想我会有两个标题（一个用于Minutes，一个用于Agendas），然后单击其中一个，所有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>

现在我的问题是当页面加载时如何使列表“折叠”而不是“展开”，因为它现在已经“展开”了？另外我如何链接Minutes或Agendas中的元素（即。咨询委员会会议纪要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()一起使用。

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

2 个答案: