上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {

            padding: 0;

            margin: 0;

        }

        ul {

            list-style: none;

        }

        .box {

            width: 960px;

            /*height: 60px;*/

            overflow: hidden;

            margin: 0 auto;

            /*border: 1px solid green;*/

        }

        .box ul li {

            float: left;

            /*width: 160px;*/

            /*height: 60px;*/

            line-height: 60px;

            text-align: center;

        }

        .box ul li a {

            text-decoration: none;

            display: block;

            width: 40px;

            height: 60px;

            color: #000;

            padding: 0 60px;

            background-color: yellow;

        }

        .box .show {

            width: 100%;

            height: 200px;

            position: absolute;

            /*background-color: red;*/

            top: 60px;

            left: 0;

            border-top: 1px solid #666;

            border-bottom: 1px solid #666;

            border-left: 1px solid #666;

            border-right: 1px solid #666;

            display: none;

            box-shadow: 0 0 5px #777;

        }

        .box .show.active {

            display: block;

        }

    </style>

</head>

<body>

<div class="box">

    <ul>

        <li>

            <a href=" ">felix手机</a>

            <div class="show">

                <div class="container">

                    张三

                </div>

            </div>

        </li>

        <li>

            <a href="#">felix手机</a>

            <div class="show">

                <div class="container">

                    李四

                </div>

            </div>

        </li>

        <li>

            <a href="#">felix手机</a>

            <div class="show">

                <div class="container">

                    王五

                </div>

            </div>

        </li>

        <li>

            <a href="#">felix手机</a>

            <div class="show">

                <div class="container">

                    赵六

                </div>

            </div>

        </li>

        <li>

            <a href="#">felix手机</a>

            <div class="show">

                <div class="container">

                    武七

                </div>

            </div>

        </li>

        <li>

            <a href="#">felix手机</a>

            <div class="show">

                <div class="container">

                    哈哈哈哈

                </div>

            </div>

        </li>

</div>

<script type="text/javascript" src='../jquery-3.3.1.min.js'></script>

<script type="text/javascript">

    $(function () {

        // 控制当鼠标第一次呼入的动画效果

        let animated = false;

        $('.box>ul>li>a').mouseenter(function (ev) {

            // 下面代码时鼠标第一次滑入a标签的动画效果

            if (!animated) {

                animated = true;

                let jQa = $(this);

                jQa.css('color', '#F52809');

                // next()表示当前标签的紧挨着的兄弟标签

                $(this).next("div").stop().slideDown(600);

            } else {

                let jQa = $(this);

                // 修改a标签的样式

                jQa.css('color', '#F52809').parent('li').siblings('li').children('a').css('color', 'black');

                // 切换下面显示区域的内容

                jQa.next('div').stop().show().parents('li').siblings('li').children('.show').stop().hide();

            }

        });

        // 鼠标进入到下方区域，保持不变

        $('.show').mouseenter(function (ev) {

            $(this).stop().show();

        });

        // 鼠标离开下方区域

        $('.show').mouseleave(function (ev) {

            $(this).stop().slideUp(300);

            animated = false

        });

        // 鼠标离开导航栏列表

        $('.box').mouseleave(function (ev) {

            console.log($(ev.target));

            $(ev.target).next("div").stop().slideUp(300);

            animated = false;

        });

    })

</script>

</body>

</html>

jQuery系列（七）：导航栏实例的更多相关文章

  1. jquery侧边折叠导航栏制作，两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  2. jquery版滑块导航栏

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  3. 【1-4】jQuery代码风格-导航栏

    实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...

  4. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  5. Jquery实现动态导航栏和轮播导航栏

    动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...

  6. HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚

    导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...

  7. jQuery实现侧边导航栏效果

    效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...

  8. 导航菜单：jQuery粘性滚动导航栏效果

    粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...

  9. 基于Bootstrap、Jquery的自适应导航栏

    css代码: .kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;backgr ...

随机推荐

  1. spark机器学一Mllib 数据抽象

    spark 提供了两个机器学习库 MLlib 和 ML,MLlib 是 spark 第一个机器学习库,相比于 ML,它更加成熟 rdd 是 spark core 的数据抽象,dataframe 是 s ...

  2. Win10环境下，告别MarkdownPad，用Notepad++搭建编写md文档的环境

    1. 为什么抛弃MarkdownPad 2 ? MarkdownPad坊间号称 Windows 环境下最好用的markdown编辑器-EXO me??? 博主入MarkdownPad 2 坑就是因为这 ...

  3. hdu 6077多校签到

    #include <iostream> #include <cstdio> using namespace std; ][]; int f(int pos) { ; ;i< ...

  4. vue开发中利用正则限制input框的输入（手机号、非0开头的正整数等）

    我们在前端开发中经常会碰到类似手机号输入获取验证码的情况,通常情况下手机号的输入需要只能输入11位的整数数字.并且需要过滤掉一些明显不符合手机号格式的输入,那么我们就需要用户在输入的时候就控制可以输入 ...

  5. luogu1156垃圾陷阱题解--背包DP

    题目链接 https://www.luogu.org/problemnew/show/P1156 方法1 分析 将已经爬的高度看作背包容积,最大剩余血量看作价值,\(f[i][j]\)表示吃完第\(i ...

  6. Flutter 38: 图解 Flutter 基本动画 (二)

    小菜前两天学习了以下 Animation 的基本动画,接下来小菜学习以下稍微进阶版的 Animation 动画. 复合动画 小菜前两天学习的主要是基本的单一动画,当然多个动画效果集一身也是毫无问题的, ...

  7. HashMap闭环(死循环)的详细原因(转)

    为何出现死循环简要说明 HashMap是非线程安全的,在并发场景中如果不保持足够的同步,就有可能在执行HashMap.get时进入死循环,将CPU的消耗到100%. HashMap采用链表解决Hash ...

  8. jmeter连接mysql数据库进行单条语句查询

    前提工作: 1.在jmeter官网下载jmeter包(官网地址:https://jmeter.apache.org/).此外还需下载mysql驱动包,如:mysql-connector-java-5. ...

  9. 【loj#6220】sum

    题目传送门:https://loj.ac/problem/6220 题意:对于一个序列$a$,找出它的一个子序列$b$,使$\sum_{a_i \in b}a_i \equiv 0 \pmod n$ ...

  10. Istio技术与实践05：如何用istio实现流量管理

    Istio是Google继Kubernetes之后的又一开源力作,主要参与的公司包括Google,IBM,Lyft等,它提供了完整的非侵入式的微服务治理解决方案,解决微服务的管理.网络连接以及安全管理 ...