zoukankan      html  css  js  c++  java
  • js实现模拟下拉菜单

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>模拟下拉菜单t</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul,
            li {
                list-style: none;
            }

            body {
                background-color: rgb(80, 79, 78);
            }

            .nav {
                 300px;
                height: 30px;
                background-color: rgb(61, 53, 56);
                margin: 0 auto;
                border: 1px solid;
                border: 1px solid white;
                position: relative;
                color: whitesmoke;
                line-height: 30px;
                text-indent: 2em;
            }

            .smallnav {
                display: none;
            }

            ul {
                position: absolute;
                top: 30px;
                border: 1px solid white;
            }

            li {
                /* display: none; */
                background-color: black;
                 300px;
                height: 30px;
                color: whitesmoke;
                border-bottom: 1px dotted whitesmoke;
                line-height: 30px;
            }

            .smallnav li:hover {
                background-color: rgb(211, 200, 180);
            }
        </style>
    </head>

    <body>
        <div class="nav">
            <div class="header">地下城与勇士</div>
            <ul class="smallnav">
                <li>地下城与勇士</li>
                <li>魔兽世界(国服)</li>
                <li>魔兽世界(台服)</li>
                <li>热血江湖</li>
                <li>大话西游||</li>
                <li>QQ幻想世界</li>
            </ul>

        </div>
    </body>

    </html>
    <script>
        var oli = document.querySelectorAll("li");
        var onav = document.querySelector(".nav");
        var oheader = document.querySelector(".header");
        var osmallnav = document.querySelector(".smallnav")
        for (var i = 0; i < oli.length; i++) {//得到每个li
            oli[i].onclick = function (e) {
                oheader.innerHTML = this.innerHTML;
                osmallnav.style.display = "none";
                e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;//阻止事件冒泡
            }
            oheader.onclick = function (e) {
                osmallnav.style.display = "block";
                e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;//阻止事件冒泡
            }
            document.onclick = function () {
                osmallnav.style.display = "none";
            }
        }
    </script>

     

  • 相关阅读:
    [ Algorithm ] N次方算法 N Square 动态规划解决
    [ Algorithm ] LCS 算法 动态规划解决
    sql server全文索引使用中的小坑
    关于join时显示no join predicate的那点事
    使用scvmm 2012的动态优化管理群集资源
    附加数据库后无法创建发布,error 2812 解决
    浅谈Virtual Machine Manager(SCVMM 2012) cluster 过载状态检测算法
    windows 2012 r2下安装sharepoint 2013错误解决
    sql server 2012 数据引擎任务调度算法解析(下)
    sql server 2012 数据引擎任务调度算法解析(上)
  • 原文地址:https://www.cnblogs.com/bwnnxxx123/p/13029244.html
Copyright © 2011-2022 走看看