Bagaimana untuk menyembunyikan kotak drop-down dalam javascript-tutorial js-php.cn

Bagaimana untuk menyembunyikan kotak drop-down dalam javascript

王林

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

asal

1989 orang telah melayarinya

Kaedah Javascript untuk mencapai kesan menyembunyikan kotak drop-down: [function moreCon(){ var backg = document.getElementById('colorChange');

Bagaimana untuk menyembunyikan kotak drop-down dalam javascript

Persekitaran pengendalian artikel ini: sistem windows10, javascript 1.8.5, komputer thinkpad t480.

Mengklik untuk menunjukkan atau menyembunyikan kotak lungsur adalah kesan biasa di tempat kerja, jadi bagaimana untuk mencapai kesan ini?

Mari kita lihat kesan selepas pelaksanaan:

Bagaimana untuk menyembunyikan kotak drop-down dalam javascript

Kod pelaksanaan khusus:

<!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>

Salin selepas log masuk

Petua:

Operator perbandingan JS: "==" ialah "sama", "===" ialah "sama persis (nilai dan jenis)"

a's "href" dan "onclick" : Penyemak imbas mula-mula akan melaksanakan acara onclick, dan kemudian melaksanakan tindakan di bawah atribut href. Untuk mengekalkan gaya href css tanpa menjejaskan acara onclick, anda boleh menulis:

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

Salin selepas log masuk

Pembelajaran yang disyorkan: tutorial video javascript

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan kotak drop-down dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!