Javascript展开/折叠div加载为展开而不是折叠答案

【问题标题】：Javascript expand/collapse div loading as expanded rather than collapseJavascript展开/折叠div加载为展开而不是折叠
【发布时间】：2012-06-21 22:12:38
【问题描述】：

希望对 javascript 有更好了解的人可以提供帮助，我想使用以下内容在我们的网站上创建展开/折叠 div，但是它会在展开时自动加载，因为它最初需要在折叠时加载。

代码如下：

<script type="text/javascript">
 // toggle specific
 function toggleDiv(id1,id2) {
  var tag = document.getElementById(id1).style;
  var tagicon = document.getElementById(id2);

  if(tag.display == "none") {
   tag.display = "block";
   tagicon.innerHTML = "&nbsp;-&nbsp;";
  } else {
   tag.display = "none";
   tagicon.innerHTML = "&nbsp;+&nbsp;";
  }
 }

 function expandAll(cnt) {
  for(var x=1; x<=cnt; x++) {
    document.getElementById('content'+x).style.display="block";
    document.getElementById('icon'+x).innerHTML="&nbsp;-&nbsp;";  
  }
 }

 function collapseAll(cnt) {
  for(var x=1; x<=cnt; x++) {
    document.getElementById('content'+x).style.display="none";
    document.getElementById('icon'+x).innerHTML="&nbsp;+&nbsp;";  
  }
 }

</script>

<style type="text/css">
 .title {
  padding:5px; 
  border:1px solid #CCCCCC;
  font:15px arial; 
  width:300px; 
  cursor:pointer;
  height:20px;
 }

 .item {
  padding:5px; 
  border:1px solid #CCCCCC; 
  font:12px verdana; 
  width:300px;
 }

 .item div {
  border-bottom:1px dashed #CCCCCC;
  padding:5px;
 }

 .button {
  border:1px solid #CCCCCC; 
  padding:5px;
  cursor:pointer;
 }

</style>

</head>
<body>

 </div>
 <div class="title" onClick="javascript:toggleDiv('content1','icon1');">
  <span style="float:left">Sample Title 1</span>
  <span id="icon1" style="float:right">&nbsp;-&nbsp;</span> 
 </div>
 <div id="content1" class="item">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
 </div>
 <div class="title" onClick="javascript:toggleDiv('content2','icon2');">
  <span style="float:left">Sample Title 2</span>
  <span id="icon2" style="float:right">&nbsp;-&nbsp;</span> 
 </div>
 <div id="content2" class="item">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
 </div>

【问题讨论】：

标签： javascript html

【解决方案1】：

有两种方法可以做到这一点。一方面，您可以通过将 - 替换为 + 并使用适当的 css 样式来以折叠状态启动所有 html。或者，按照建议，您可以将 collapseAll 绑定到 onload - 我建议您查看 Best practice for using window.onload 以了解有关 window.onload 的最佳实践，因为如果您不小心，您可能会遇到令人讨厌的行为

【讨论】：

您好，感谢您的回复。您能否协助我将 window.onload 代码放在哪里？当涉及到 javascript 时，并不是真的在那里，基本上是在寻找最简单的方法来让它根据需要工作。谢谢
当然可以。链接的问题实际上建议在窗口 onload 事件上使用事件侦听器，而不是直接设置函数，但如果您想直接设置它，我建议在您当前拥有的脚本标记中这样做，就在您定义 collapseAll 的位置跨度>

【解决方案2】：

<div class="title" onclick="javascript:toggleDiv('content1','icon1');">
                     ^ should be lowercase
  <span style="float:left">Sample Title 1</span>
  <span id="icon1" style="float:right">&nbsp;+&nbsp;</span> 
                                             ^ should expand
 </div>
 <div id="content1" class="item" style="display:none;">
                                 ^ should be hidden  ^
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
 </div>

但请注意，非 JS 用户届时将看不到任何内容。

【讨论】：