将列表显示为已折叠

Question

我创建了一个列表并希望将其显示为已折叠，并且在单击列表项后，应将其展开。我创建了演示here。 我正在使用以下javascript方法：

function toggle(id){
    var e = document.getElementById(id);
    if (e.style.display == '') {
        e.style.display = 'none'; 
    } else {
        e.style.display = '';
    }
}

我有以下问题：

1. 使用此代码在jsFiddle中不会发生展开/折叠，因为相同的代码在html中正常工作。
2. 默认情况下，列表应显示为已折叠。

有什么想法吗？

Answer 1

解决方案＃1：

在小提琴中使用No-Wrap in body并让它在小提琴中运作：

解决方案＃2：

默认情况下，它总是崩溃！如果你不想让它被重新分配，你可以设置display:none;。

这是一个纯粹的JavaScript解决方案，还有许多其他解决方案可供选择，您可以根据需要选择，如果您在网站中包含任何jQuery库，那么我建议使用{{ 1}}

Fiddle Demo

Answer 2

添加了style =＆＃34; display：none＆＃34;到span元素，使列表在默认情况下折叠，并且在小提琴选项中不包含在主体中。 http://jsfiddle.net/UDKLK/9/

<span id="objDetails" style="display:none">

Answer 3

稍微更新了您的代码=应该在文档加载时调用toggle（）函数：

toggle('objDetails')

function toggle(id){
var e=document.getElementById(id);
if (e.style.display == '') 
   {
       e.style.display = 'none'; 
   } 
else {
    e.style.display = '';
     }
}

以下是链接：demo

Answer 4

您需要将代码包装在头部或主体中，而不是onLoad。

要使其默认折叠，只需添加：

#objDetails
{
    display: none;
}

Working example

无关注：这里不包含jQuery，只是纯粹的Javascript。

Answer 5

document.getElementById('objDetails').style.display = 'none'; 

您还必须将此行添加到javascript代码中。

以下是 updated fiddle