javascript怎么实现隐藏下拉框

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怎么实现隐藏下拉框的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！