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

最新推荐文章于 2021-07-02 23:23:20 发布

爱因斯坦.薛

最新推荐文章于 2021-07-02 23:23:20 发布

阅读量1.4k

点赞数

分类专栏： Web开发文章标签： border class html div

本文链接：https://blog.csdn.net/rocket5725/article/details/4313265

版权

Web开发专栏收录该内容

24 篇文章 0 订阅

订阅专栏

最近公司需要在机顶盒上实现下拉菜单功能，但是如果用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="#" οnclick="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>

效果图如下所示：

图一：显示层

图二：隐藏层

爱因斯坦.薛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS代码解决层显示/隐藏问题

最近公司需要在机顶盒上实现下拉菜单功能，但是如果用Select的话操作相当不方便(考虑到遥控器跟鼠标的不同)，所以跟同事考虑后用层来做选择。代码如下：点击显示/隐藏层<!--a{text-decoration:none;}.tab{border:1px solid #e57243;border-top:0;margin:10px 0;text-align:left;w
复制链接

扫一扫

专栏目录