CSS+JavaScript实现层级显示隐藏

最新推荐文章于 2021-06-22 21:34:00 发布

最新推荐文章于 2021-06-22 21:34:00 发布 · 169 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个简单的JavaScript函数toggle，用于实现网页中多个DIV元素的显示与隐藏效果。通过点击不同的DIV，可以控制其子级或指定ID的DIV的显示状态。此功能常用于网页导航栏的展开与收起。

/***************************by garcon1986********************************/

感谢优快云的shan1119 帮我解决Javascript部分的错误。

<mce:script language="JavaScript"></mce:script>

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#main{ position:relative; top:20px; left:20px; width:200px; background: lightblue; } #hidden { position:relative; top:0px; left:280px; width:200px; background: lightgrey; display: none; } #hidden2 { position:relative; top:-20px; left:580px; width:200px; background: lightgreen; display: none; } #hidden3 { position:relative; top:100px; left:0px; width:200px; background: lightpink; display: none; }</style> <div id="main" onclick="toggle('hidden','hidden2','hidden3');"> 1 </div> <div id="hidden" onclick="toggle('hidden2','hidden3')"> 1.1 </div> <div id="hidden2"onclick="toggle('hidden3');"> 1.1.1 </div> <div id="hidden3"> 1.1.1.1 </div>

原帖：http://topic.youkuaiyun.com/u/20091215/05 /0e44fd89-74b3-4622-8ce7-3b3b8927db45.html