javascript如何实现隐藏下拉框

这篇文章主要讲解了“javascript如何实现隐藏下拉框”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript如何实现隐藏下拉框”吧！

创新互联制作网站网页找三站合一网站制作公司,专注于网页设计,成都网站制作、成都网站建设,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为近千家服务,创新互联网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!

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

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

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

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

具体实现代码：

    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;}


    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';
            }
    }





    搜索
    图片
    地图
    新闻
    
        更多
        
        
            

                
云端硬盘
                
日历
                
翻译
                
Blogger