利用JS实现新浪下拉菜单

JavaScript013

利用JS实现新浪下拉菜单,第1张

<style>

        .clearfix::after {

            display: block

            content: ""

            clear: both

        }

        ul,

        li {

            list-style: none

        }

        .nav>li {

            float: left

            margin: 0 10px

        }

        .nav>li ul {

            display: none

        }

    </style>

</head>

<body>

    <ul class="nav clearfix">

        <li>

            <a href="">微博</a>

            <ul>

                <li>私信</li>

                <li>评论</li>

                <li>@我</li>

            </ul>

        </li>

        <li>

            <a href="">微博</a>

            <ul>

                <li>私信</li>

                <li>评论</li>

                <li>@我</li>

            </ul>

        </li>

        <li>

            <a href="">微博</a>

            <ul>

                <li>私信</li>

                <li>评论</li>

                <li>@我</li>

            </ul>

        </li>

        <li>

            <a href="">微博</a>

            <ul>

                <li>私信</li>

                <li>评论</li>

                <li>@我</li>

            </ul>

        </li>

    </ul>

    <script>

        //案例分析：导航栏里面的li都要有鼠标经过效果 所以需要循环注册鼠标事件

        //核心原理：当鼠标经过li里面的第二个孩子ul显示 当鼠标离开 ul隐藏

        var nav = document.querySelector('.nav')

        var lis = nav.children

        for (var i = 0 i < lis.length i++) {

            lis[i].onmouseover = function() {

                this.children[1].style.display = 'block'

            }

            lis[i].onmouseout = function() {

                this.children[1].style.display = 'none'

            }

        }

    </script>

function(data) {

// 提示信息

$("#operate_msg").text(data.message)

$("#operate_result_info").show()

// 等待2S，关闭提示信息

setTimeout(function(){

$("#operate_result_info").hide()

}, 2000)

}

不明白先采纳再追问