在JavaScript HTML中展开折叠菜单

Question

我发现此代码可以使菜单在用户单击页面内的减号时折叠。 但是，当页面首次加载时，菜单会显示“主要项目”中的所有内容。 我想让页面在加载时仅显示Main Item。 这是代码：

    <script langauge="JavaScript" type="text/javascript">
function doMenu(item) {
 obj=document.getElementById(item);
 col=document.getElementById("x" + item);
 if (obj.style.display=="none") {
  obj.style.display="block";
  col.innerHTML="[-]";
 }
 else {
  obj.style.display="none";
  col.innerHTML="[+]";
 }
}
</script>
</head>
<body>
<a href="JavaScript:doMenu('main');" id=xmain>[+]</a> Main Item
<div id=main style="margin-left:1em">
 <a href=#>Item 1</a><br>
 <a href=#>Item 2</a><br>
 <a href=#>Item 3</a>
</div>
<br>
</body>
</html>

如果有人可以向我展示如何更改代码来做到这一点，我将非常感激。

谢谢

Answer 1

更改：

<a href="JavaScript:doMenu('main');" id=xmain>

至：

<a href="JavaScript:doMenu('main');" style="display: none;" id=xmain>

顺便说一句，正如某些方面所述，您发现的代码不是很好。 如果这是一个专业项目，我不会使用它。

首先，我将更改：

obj.style.display="block";

至：

obj.style.display="";

避免某些浏览器中的错误。

Answer 2

window.addEventListener('load', function(){
    document.getElementById('main').style.display = 'none';
}, false);

Answer 3

我认为改变

<div id=main style="margin-left:1em">

至

<div id=main style="margin-left:1em; display:none">

应该管用。

在JavaScript HTML中展开折叠菜单

问题描述

3 个解决方案

解决方案1
0 2011-11-28 22:22:01

解决方案2
0 已采纳 2011-11-28 22:23:38

解决方案3
0 2011-11-28 22:25:08

在JavaScript HTML中展开折叠菜单

问题描述

3 个解决方案

解决方案1 0 2011-11-28 22:22:01

解决方案2 0 已采纳 2011-11-28 22:23:38

解决方案3 0 2011-11-28 22:25:08

解决方案1
0 2011-11-28 22:22:01

解决方案2
0 已采纳 2011-11-28 22:23:38

解决方案3
0 2011-11-28 22:25:08