上代码：

<!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. VS2017生成一个简单的DLL文件 和 LIB文件——C语言

    下面我们将用两种不同的姿势来用VS2017生成dll文件(动态库文件)和lib文件(静态库文件),这里以C语言为例,用最简单的例子,来让读者了解如何生成dll文件(动态库文件) 生成动态库文件 姿势一 ...

  2. analysis_tools

  3. tesseract ocr .Net demo

    环境vs 2019 .Net 4.8 新建一个wpf工程,拖放上一个button一个textbox nuget下载tesseract,版本信息如图所示 MainWindow.xaml.cs文件代码如下 ...

  4. 怎样通过id属性值获取元素节点

    方法1: 使用document.getElementById(); 方法2: 使用document.querySelector(); document.getElementById("app ...

  5. redis 命令行操作报错

    向redis集群写数据抛异常:(error) MOVED 15342 2001:fecc:0:616::34:6383 原因是启动redis-cli时未以集群方式启动,即后面要加上 -c redis- ...

  6. vue-cli3 本地数据模拟后台接口

    vue-cli3 本地数据模拟后台接口 原理: 将本地的json数据在前端模拟为后台接口,然后调用接口,完成前端操作.在后台接通后可以直接在api配置文件中修改路径,完成前后台对接. 配置: 1.文件 ...

  7. queryURLParams

    let url = 'http://www.douqu.com/index.html?name1=val1&name2=val2'; //1.提取问号后的字符 let asktext = ur ...

  8. 有趣的"=="与"==="

    console.log([]==![]);//true //"=="会进行类型转换,转换成统一类型进行比较 // !符号优于==,[]boolean值为TRUE,所以![]就是FA ...

  9. Asp .Net Core 2.0 登录授权以及前后台多用户登录

    用户登录是一个非常常见的应用场景 .net core 2.0 的登录方式发生了点变化,应该是属于是良性的变化,变得更方便,更容易扩展. 配置 打开项目中的Startup.cs文件,找到Configur ...

  10. 【Struts2】Ognl与ValueStack

    一.OGNL 1.1 概述 1.2 OGNL 五大类功能 1.3 演示 二.ValueStack 2.1 概述 2.2 ValueStack结构 2.3 结论 2.3 一些问题 三.OGNL表达式常见 ...