2

希望对 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>
4

2 回答 2

2

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

于 2012-06-21T22:18:04.980 回答
1 
<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 用户届时将看不到任何内容。

于 2012-06-21T22:16:44.790 回答