2

我创建了一个列表并希望将其显示为折叠状态，单击列表项后应将其展开。我在这里创建了演示。我正在使用以下 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. 默认情况下，列表应显示为折叠状态。

有什么想法吗？

4

5 回答 5

1

解决方案#1：

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

在此处输入图像描述

解决方案#2：

默认情况下它总是折叠的！display:none;如果你不想让它被调用，你可以设置它。

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

小提琴演示

于 2013-07-23T08:50:29.647 回答
1

向 span 元素添加了 style="display:none" 以使列表默认折叠，并且在小提琴选项中不换行。 http://jsfiddle.net/UDKLK/9/

<span id="objDetails" style="display:none">
于 2013-07-23T08:54:39.853 回答
0

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

toggle('objDetails')

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

这是链接：演示

于 2013-07-23T08:51:32.830 回答
0

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

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

#objDetails
{
    display: none;
}

工作示例

无关说明：这不包含 jQuery，只是纯 Javascript。

于 2013-07-23T08:51:48.047 回答
0 
document.getElementById('objDetails').style.display = 'none';

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

这是更新的小提琴

于 2013-07-23T08:53:31.807 回答