在JavaScript HTML中展开折叠菜单

Expand Collapse Menu in JavaScript HTML

本文关键字：折叠 菜单 JavaScript HTML      更新时间：2023-09-26

我发现这段代码可以使一个菜单在用户单击页面内的减号时崩溃。但是当页面第一次加载时，菜单会显示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>

如果有人能告诉我如何修改代码来做到这一点，我将非常感激。

谢谢

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

变化:

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

: 

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

顺便说一句，正如一些边注，你发现的代码不是很好。如果这是一个专业的项目，我不会使用它。

对于一个，我会改变:

obj.style.display="block";

: 

obj.style.display="";

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

我认为改变

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


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

。

相关文章：