您的位置 首页 技术专栏

javascript怎么实现隐藏下拉框

24小时课堂在线收录javascript怎么实现隐藏下拉框,javascript实现隐藏下拉框效果的方法:【function moreCon(){ var backg = document.getEl…感谢您关注javascript怎么实现隐藏下拉框。

javascript实现隐藏下拉框效果的方法:【function moreCon(){ var backg = document.getElementById(‘colorChange’); var mdiv = document…】。

本文操作环境:windows10系统、javascript 1.8.5、thinkpad t480电脑。

点击显示或隐藏下拉框是工作中常见的一种效果,那么这种效果该如何实现呢?

我们先来看下实现后的效果:

javascript怎么实现隐藏下拉框

具体实现代码:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″><title>JS点击显示或隐藏下拉框</title><style type=”text/css”> html,body,div,ul,p{padding: 0;margin: 0;} p{pst-style: none;} a{text-decoration: none;color: #ccc;font-size: 13px;} #top{width: 100%;background: #2D2D2D;height: 30px;} .topp{float: left;height: 30px;pne-height: 30px;} .topp a{display:block;padding: 0 14px;height: 30px;} .topp a:hover{background:#444;} .more{position: absolute;top: 30px;background: #fff;display: none;border: 1px sopd #c2c2c2;z-index: 999;border-top: none;} .more a{color: #3366CC;} .more a:hover{background: #f0f0f0;}</style><script type=”text/javascript”> function moreCon(){ var backg = document.getElementById(‘colorChange’); //定义变量 var mdiv = document.getElementById(‘moreContent’); if (mdiv.style.display==’block’) { //if else判断ID为moreContent的display是否为block “==”为“等于” 为比较运算符 mdiv.style.display=’none’; backg.style.background=’#2D2D2D’; //修改样式 backg.style.color=’#ccc’; } else { mdiv.style.display=’block’; backg.style.background=’#fff’; backg.style.color=’#3366CC’; } }</script><!– JS点击显示或隐藏下拉框 end –></head><body><ul id=”top”> <p class=”topp”><a href=””>搜索</a></p> <p class=”topp”><a href=””>图片</a></p> <p class=”topp”><a href=””>地图</a></p> <p class=”topp”><a href=””>新闻</a></p> <p class=”topp”> <a href=”javascript:void()” oncpck=”moreCon()” id=”colorChange”>更多</a> <!– 对于浏览器来说 oncpck会比href先执行 –> <div class=”more” id=”moreContent”> <ul> <p><a href=””>云端硬盘</a></p> <p><a href=””>日历</a></p> <p><a href=””>翻译</a></p> <p><a href=””>Blogger</a></p> </ul> </div> </p></ul></body></html>

提示:

js的比较运算符:“==”为“等于”,“===”为“完全相等(值和类型)”

a的“href”与“oncpck”:浏览器会先执行oncpck事件,在执行href属性下的动作。为了保持href的css样式,又不会影响oncpck事件,可以写成:

<a href=”javascript:void()” oncpck=”moreCon()” id=”colorChange”>更多</a>

以上就是javascript怎么实现隐藏下拉框的详细内容,更多请关注24小时课堂在线其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/97110.html

为您推荐

返回顶部