How to hide the drop-down box in javascript-JS Tutorial-php.cn

How to hide the drop-down box in javascript

王林

Release： 2021-10-26 17:18:36

Original

2020 people have browsed it

Javascript method to achieve the effect of hiding the drop-down box: [function moreCon(){ var backg = document.getElementById('colorChange'); var mdiv = document...].

How to hide the drop-down box in javascript

#The operating environment of this article: windows10 system, javascript 1.8.5, thinkpad t480 computer.

Clicking to show or hide the drop-down box is a common effect in work, so how to achieve this effect?

Let’s first take a look at the effect after implementation:

How to hide the drop-down box in javascript

Specific implementation code:

<!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(&#39;colorChange&#39;);  //定义变量
        var mdiv = document.getElementById(&#39;moreContent&#39;);
        if (mdiv.style.display==&#39;block&#39;) {                  //if else判断ID为moreContent的display是否为block   “==”为“等于” 为比较运算符
            mdiv.style.display=&#39;none&#39;;
            backg.style.background=&#39;#2D2D2D&#39;;                //修改样式
            backg.style.color=&#39;#ccc&#39;;
        }
        else
            {
                mdiv.style.display=&#39;block&#39;;
                backg.style.background=&#39;#fff&#39;;
                backg.style.color=&#39;#3366CC&#39;;
            }
    }
</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>

Copy after login

Tips:

js comparison operator: "==" is "equal to", "===" is "completely equal (value and type)"

a's "href" and "onclick": Browse The processor will first execute the onclick event, and then execute the action under the href attribute. In order to maintain the css style of href without affecting the onclick event, you can write:

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

Copy after login

Recommended learning: javascript video tutorial

The above is the detailed content of How to hide the drop-down box in javascript. For more information, please follow other related articles on the PHP Chinese website!