javascript实现隐藏下拉框效果的方法：【function morecon(){ var backg = document.getelementbyid('colorchange'); var mdiv = document...】。
本文操作环境：windows10系统、javascript 1.8.5、thinkpad t480电脑。
点击显示或隐藏下拉框是工作中常见的一种效果，那么这种效果该如何实现呢？
我们先来看下实现后的效果：
具体实现代码：
<!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,li{padding: 0;margin: 0;} li{list-style: none;} a{text-decoration: none;color: #ccc;font-size: 13px;} #top{width: 100%;background: #2d2d2d;height: 30px;} .topli{float: left;height: 30px;line-height: 30px;} .topli a{display:block;padding: 0 14px;height: 30px;} .topli a:hover{background:#444;} .more{position: absolute;top: 30px;background: #fff;display: none;border: 1px solid #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"> <li class="topli"><a href="">搜索</a></li> <li class="topli"><a href="">图片</a></li> <li class="topli"><a href="">地图</a></li> <li class="topli"><a href="">新闻</a></li> <li class="topli"> <a href="javascript:void()" onclick="morecon()" id="colorchange">更多</a> <!-- 对于浏览器来说 onclick会比href先执行 --> <div class="more" id="morecontent"> <ul> <li><a href="">云端硬盘</a></li> <li><a href="">日历</a></li> <li><a href="">翻译</a></li> <li><a href="">blogger</a></li> </ul> </div> </li></ul></body></html>
提示：
js的比较运算符：“==”为“等于”，“===”为“完全相等（值和类型）”
a的“href”与“onclick”：浏览器会先执行onclick事件，在执行href属性下的动作。为了保持href的css样式，又不会影响onclick事件，可以写成：
<a href="javascript:void()" onclick="morecon()" id="colorchange">更多</a>
推荐学习：javascript视频教程
以上就是javascript怎么实现隐藏下拉框的详细内容。