下拉菜单的实现

合集 - 前端(9)
1.CSS、JS、jQuery中选择器总结2.JS中得到自定义属性值3.为选中的按钮添加特定属性4.Tab栏切换5.event 和 this 的区别
6.下拉菜单的实现
7.mouse事件8.Vue中watch监听属性新旧值相同问题解决方案9.export、exports以及export default 的导入导出
收起

下拉菜单

​ ul 内放着若干 li ； li 内 分上下两块；上面是 a ; 下面是 ul ；ul 内有多个 li ，给li添加监听事件， 鼠标移入到 a 内时，ul 显示；鼠标再移入 ul 内时，ul 继续显示

​ 结构

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
</body>

​ jQuery方法

        $(function () {
            //结构：jQuery对象。行为（发生的事件）
            //不需要用 for 循环，因为jQuery 内有隐式迭代
            //鼠标经过
            $(".nav > li").mouseover(function(){
               // $(this) jQuery 当前元素; this 不要加引号
               $(this).children("ul").show()
            // $("ul>li>ul").show()   是所有，并非当前这一个；这就体现出选择函数的重要性
            })
            //鼠标离开
            $(".nav > li").mouseout(function () {
                this.children("ul").hide()
            })
        })

​ 原生JS方法

    <script>
        const li = document.querySelectorAll('.nav > li')
        for (i = 0;li.length;i++){
            li[i].addEventListener('mouseover',function () {
                //this在这里成了最顶级的
                //认真学习如何选中下一级
                this.querySelector('ul').style.display = 'block'
            })
            li[i].addEventListener('mouseout',function () {
                this.querySelector('ul').style.display = 'none'
            })
        }
    </script>
posted @   Agiser0  阅读(28)  评论(0)  编辑  收藏  举报
相关博文：
· Tab栏切换
· 为选中的按钮添加特定属性
· 案例：新浪下拉菜单
· JS之下拉菜单案例鼠标经过显示
· CSS 下拉菜单
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示