JS代码解决层显示/隐藏问题

最新推荐文章于 2022-09-30 11:20:31 发布

原创最新推荐文章于 2022-09-30 11:20:31 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#border #class #html #div

Web开发专栏收录该内容

24 篇文章

订阅专栏

为解决机顶盒上实现下拉菜单的问题，本文介绍了一种使用HTML和JavaScript实现的下拉层方案。该方案通过点击触发显示或隐藏特定元素来实现菜单的展开与收起。

最近公司需要在机顶盒上实现下拉菜单功能，但是如果用Select的话操作相当不方便(考虑到遥控器跟鼠标的不同)，所以跟同事考虑后用层来做选择。代码如下：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>点击显示/隐藏层</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">a{text-decoration:none;} .tab{border:1px solid #e57243;border-top:0;margin:10px 0;text-align:left;width:200px;font-size:14px;} .th{border-top:1px solid #e57243;padding:5px;font-weight:700;clear:both;background:#f5e1d9;} .td{background:none;padding-left:37px;}</style> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="tab"> <div class="th" id="9"><a href="#" mce_href="#" onclick="return chg('test');" id="test_a">[-]</a> 上学期</div><div class="th td" id="test" style="display:block;" mce_style="display:block;"> <p><a href="#" mce_href="#">上学期</a></p> <p><a href="#" mce_href="#">下学期</a></p> </div> </div> </body> </html>

效果图如下所示：

图一：显示层