js 显示/隐藏菜单 li怎么实现啊？求助

答案:1 悬赏:70 手机版

解决时间 2021-03-12 07:35

提问者网友：缘字诀
2021-03-11 15:57

我想要点击“工具”菜单中的“小节工具”，就把“小节工具”这个菜单显示出来。
点击“工具”菜单中的“排版工具”，就把“排版工具”显示出来，之前的“小节工具”隐藏。
应该怎么写JS，怎么实现这个交果呢？感谢！
代码如下：
<style type="text/css">
body { ont-family:"宋体"; ont-size:10px; }
.menu { height:30px; background:#e6e6e6; margin-left:10px; }
.menu a { text-decoration:none; }
ul { margin:0; padding:0; }
.menu li { list-style:none; float:left; width:90px; overflow:visible; cursor:pointer; }
ul.level0 { height:30px; overflow:visible; }
ul.level1, ul.level2, ul.level3 { width:90px; display:none; }
ul.level2, ul.level3 { margin:-28px 0 0 90px; }
ul.level0 > li { height:30px; line-height:30px; text-align:center; background:#999; }
ul.level1 > li, ul.level2 > li, ul.level3 > li { height:25px; line-height:28px;background:#bbb; }
ul.level0 > li.imyeah:hover > ul, ul.level1 > li.imyeah:hover > ul, ul.level2 > li.imyeah:hover > ul, ul.level3 > li.imyeah:hover > ul { display:block; }
</style>
</head>
<body>
<div class="menu">
<ul class="level0">

<li class="imyeah">工具
<ul class="level1">
<li>小节工具</a></li>
<li>排版工具</a></li>
</ul>
</li>

<li class="imyeah" style="display:none" id="measure">小节工具</li>

<li class="imyeah" style="display:none" id="pageLayout">排版工具</li>
</ul>
</div>
</body>
</html>

最佳答案

五星知识达人网友：渊鱼
2021-03-11 16:56

<body>
<div class="menu">
<ul class="level0" id="leve">

<li class="imyeah">工具
<ul class="level1" id="leve1">
<li>小节工具</a></li>
<li>排版工具</a></li>
</ul>
</li>

<li class="imyeah" style="display: none;" id="measure">小节工具</li>

<li class="imyeah" style="display: none;" id="pageLayout">排版工具</li>
</ul>
</div>
<script type="text/javascript">
var oLe = document.getElementById('leve1').getElementsByTagName('li');
var oImy = document.getElementById('leve').getElementsByTagName('li');
var oMe = document.getElementById('measure');
var oPa = document.getElementById('pageLayout');
oLe[0].onclick = function(){
oMe.style.display = 'block';
oPa.style.display = 'none';
}
oLe[1].onclick = function(){
oMe.style.display = 'none';
oPa.style.display = 'block';
}
</script>
</body>记得采纳，谢谢

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

js 显示/隐藏 菜单 li怎么实现啊？求助

js 显示/隐藏菜单 li怎么实现啊？求助