Question

希望有更好的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>

Answer 1

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

Answer 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用户不会看到任何内容。

Javascript扩展/折叠div加载为扩展而不是崩溃

2 个答案: