javascript折叠菜单问题 帮忙修改，浏览器加载时，默认状态时菜单收拢，单击时才展开

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript折叠菜单问题 帮忙修改，浏览器加载时，默认状态时菜单收拢，单击时才展开相关的知识，希望对你有一定的参考价值。

<div class="title_aa"> </div>
<div class="title_a"> <a href="javascript:ShowSub('000')"> 房产管理 </a></div>
<ul id='fold_000'>
<li>小区管理</li>
<li>大楼管理</li>
<li>房屋管理</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('001')"> 客户管理 </a></div>
<ul id='fold_001'>
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('002')"> 收费管理 </a></div>
<ul id='fold_002'>
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('003')"> 客户服务 </a></div>
<ul id='fold_003'>
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('004')"> 环境管理 </a></div>
<ul id='fold_004'>
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('005')"> 保安管理 </a></div>
<ul id='fold_005'>
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('006')"> 经理查询 </a></div>
<ul id='fold_006'>
<li>123</li>
<li>123</li>
</ul>
js代码
function ShowSub(theId)

var theFo = document.getElementById("fold_" + theId);
theFo.style.display = theFo.style.display == "none"?"block":"none";

for(var j=0; j<=6; ++j)
var str = '00' + j;
if(theId != str)
var foldId = document.getElementById('fold_' + str);
foldId.style.display = 'none';



for (var i = 0; i < 7; i++)

if (i == theId)
continue;
theFo = document.getElementById("tr_" + i);
theFo.style.display = "none";

参考技术A <div class="title_a"> <a href="javascript:ShowSub('001')"> 客户管理 </a></div>
<ul id='fold_001' style="display:none">
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('002')"> 收费管理 </a></div>
<ul id='fold_002' style="display:none">
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('003')"> 客户服务 </a></div>
<ul id='fold_003' style="display:none">
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('004')"> 环境管理 </a></div>
<ul id='fold_004' style="display:none">
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('005')"> 保安管理 </a></div>
<ul id='fold_005' style="display:none">
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('006')"> 经理查询 </a></div>
<ul id='fold_006' style="display:none">
<li>123</li>
<li>123</li>
</ul>
<script>
function ShowSub(theId)

var theFo = document.getElementById("fold_" + theId);
theFo.style.display = theFo.style.display == "none"?"block":"none";

for(var j=0; j<=6; ++j)
var str = '00' + j;
if(theId != str)
var foldId = document.getElementById('fold_' + str);
foldId.style.display = 'none';



for (var i = 0; i < 7; i++)

if (i == theId)
continue;
theFo = document.getElementById("tr_" + i);
theFo.style.display = "none";


</script> 参考技术B <script>

function ShowSub(theId)

var theFo = document.getElementById("fold_" + theId);
theFo.style.display = theFo.style.display == "none"?"block":"none";

for(var j=0; j<=6; ++j)
var str = '00' + j;
if(theId != str)
var foldId = document.getElementById('fold_' + str);
foldId.style.display = 'none';



for (var i = 0; i < 7; i++)

if (i == theId)
continue;
theFo = document.getElementById("tr_" + i);
theFo.style.display = "none";



</script>
</head>

<body>
<div class="title_aa"> </div>
<div class="title_a"> <a href="javascript:ShowSub('000')"> 房产管理 </a></div>
<ul id='fold_000' style="display:none">
<li>小区管理</li>
<li>大楼管理</li>
<li>房屋管理</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('001')"> 客户管理 </a></div>
<ul id='fold_001' style="display:none">
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('002')"> 收费管理 </a></div>
<ul id='fold_002' style="display:none">
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('003')"> 客户服务 </a></div>
<ul id='fold_003' style="display:none">
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('004')"> 环境管理 </a></div>
<ul id='fold_004' style="display:none">
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('005')"> 保安管理 </a></div>
<ul id='fold_005' style="display:none">
<li>123</li>
<li>123</li>
</ul>

<div class="title_a"> <a href="javascript:ShowSub('006')"> 经理查询 </a></div>
<ul id='fold_006' style="display:none">
<li>123</li>
<li>123</li>
</ul>
</body> 参考技术C window.onload = function()
ShowSub('001')
本回答被提问者采纳

以上是关于javascript折叠菜单问题 帮忙修改，浏览器加载时，默认状态时菜单收拢，单击时才展开的主要内容，如果未能解决你的问题，请参考以下文章

CSS叠层的问题图标叠在图片的右下角；如果能解决我能加分（10分）跪求大神帮忙啊

移动菜单快速折叠

下拉菜单在css中折叠

javascript Divi | WordPress主题|移动菜单可折叠子菜单通过Toggles | CSS和jQuery调整在行动：https：//i.gyazo.com/93557e9ef5d4

在折叠移动显示所有引导子菜单为打开

滑动式折叠菜单 － Slashdot's Menu