JS / JQ 简单实现下拉菜单

效果图：

代码实现思路：

头部导航栏用 <ul> 和 <li> 实现，在每个 li 内部包含上下排列的 <a> 和 <ul> ，正常状态下该ul会隐藏，而当鼠标放在a上方时，ul就会显示。

原生JS实现代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用style修改样式 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }

        .clearfix {
            *zoom: 1
        }

        a {
            color: black;
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        .tab_header {
            border-bottom: gray 1px yellow;
            width: 480px;
        }

        .tab_title {
            float: left;
            width: 120px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }

        .tab_title a {
            display: block;
            height: 100%;
            width: 100%;
        }

        .tab_list {
            display: none;
        }

        .tab_list li {
            border: yellow 1px solid;
            border-top: none;
        }

        .yellow {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <ul class="tab_header clearfix">
        <li class="tab_title">
            <a href="#">微博</a>
            <ul class="tab_list">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li class="tab_title">
            <a href="#">微博</a>
            <ul class="tab_list">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li class="tab_title">
            <a href="#">微博</a>
            <ul class="tab_list">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li class="tab_title">
            <a href="#">微博</a>
            <ul class="tab_list">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
    </ul>
    <script>
        var titles = document.querySelectorAll('.tab_title');
        var lists = document.querySelectorAll('.tab_list');
        //循环给每个tab_title添加事件
        for (var i = 0; i < titles.length; i++) {
            titles[i].onmouseover = function () {
                for (var j = 0; j < titles.length; j++) {
                    titles[j].className = 'tab_title';
                }
                for (var j = 0; j < lists.length; j++) {
                    lists[j].style.display = 'none';
                }
                this.children[1].style.display = 'block';
                this.className = 'tab_title yellow';
            }
            titles[i].onmouseout = function () {
                for (var j = 0; j < titles.length; j++) {
                    titles[j].className = 'tab_title';
                    lists[j].style.display = 'none';
                }
            }

        }
    </script>
</body>

</html>

jQuery实现代码（需要引入JQ文件）：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用style修改样式 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }

        .clearfix {
            *zoom: 1
        }

        a {
            color: black;
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        .tab_header {
            border-bottom: gray 1px yellow;
            width: 480px;
        }

        .tab_title {
            float: left;
            width: 120px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }

        .tab_title a {
            display: block;
            height: 100%;
            width: 100%;
        }

        .tab_list {
            display: none;
        }

        .tab_list li {
            border: yellow 1px solid;
            border-top: none;
        }

        .yellow {
            background-color: yellow;
        }
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <ul class="tab_header clearfix">
        <li class="tab_title">
            <a href="#">微博</a>
            <ul class="tab_list">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li class="tab_title">
            <a href="#">微博</a>
            <ul class="tab_list">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li class="tab_title">
            <a href="#">微博</a>
            <ul class="tab_list">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li class="tab_title">
            <a href="#">微博</a>
            <ul class="tab_list">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
    </ul>
    <script>
        $(function () {
            //hover(fn1,fn2) fn1是鼠标经过触发的函数，fn2是鼠标离开触发的函数
            //stop是为了防止出现动画队列的情况，当触发下一个动画时，停止上一个动画的显示，而且stop必须写在下一个动画前面
            $('.tab_title').hover(function () {
                $('.tab_title>a').removeClass('yellow');
                $(this).children('a').addClass('yellow');
                $(this).children('ul').stop().slideDown();
            }, function () {
                $(this).children('ul').stop().slideUp();
                $('.tab_title>a').removeClass('yellow');
            });
        })
    </script>
</body>

</html>

JS / JQ 简单实现下拉菜单

猜你喜欢