上代码：

<!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. Python初学者常见错误详解

    Python初学者常见错误详解 0.忘记写冒号 在 if.elif.else.for.while.class.def 语句后面忘记添加 “:”   if spam == 42 print('Hello ...

  2. 操作系统diy-1-资料整理

    已经研三了,前段时间校招找了份内核开发的工作,正好有时间做这个以前一直想做的事情.听说写操作系统要花很多时间了解学习计算机方方面面的知识,之前也查过相关的资料,关注过mit的操作系统公开课程.这几天准 ...

  3. linux系统安全设置加固

        描述 设置SSH空闲超时退出时间,可降低未授权用户访问其他用户ssh会话的风险 检查提示 -- 加固建议 编辑/etc/ssh/sshd_config,将ClientAliveInterval ...

  4. Java建造者模式（思维导图）

    图1 建造者模式[点击查看大图] 基本的知识点已在思维导图中,下面是demo 1,Builder 为创建一个产品对象的各个部件指定抽象接口 public interface PersonBuilder ...

  5. Unity 用脚本给EventTrigger添加各种事件

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Eve ...

  6. java大框架

    本文章,列出了一些程序员需要学习的技术和知识点,有些技术和知识点没有写道,欢迎大家进行修改和补充,有些技术公司用到,大家需要先学习,有些技术和知识点过时,大家可以了解.本人笔记连接[[http://2 ...

  7. vue打包后找不到资源路径问题

    问题描述: 使用webpack打包vue项目后,前后端联调无法找到资源 解决方案: 一. 改为相对路径,去除axios中地址的第一个“/” onProxyReq: function (proxyReq ...

  8. configure.ac:91: error: possibly undefined macro: AC_SEARCH_LIBS

    debian系统上,手动编译tmux的时候,执行./autogen.sh出现如下报错: $ ./autogen.sh configure.ac:: error: possibly undefined ...

  9. 揭秘如何用Python黑掉智能锅炉

      引文 去年我买了一个新的冷凝式锅炉(家用取暖产品),于是考虑上面必须有一个“智能恒温器”,而选择也很多,包括Google Nest. Hive(英国天然气公司设计的) 以及伍斯特·博世‘Wave’ ...

  10. C和指针--链表

    1.链表的基本概念 链表(linked list)是一些包含数据的节点的集合.链表中的每个节点通过链或指针连接在一起.程序通过指针访问链表中的节点.通常节点是动态分配的. 2.链表的分类 链表可分为: ...