javascript怎么实现隐藏下拉框

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

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

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

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

81GT`TQWJ8X~LEBM2TZ]NBP.png

具体实现代码：

<!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怎么实现隐藏下拉框

相关推荐