上代码：

<!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 自动化测试

    安装selenium 安装命令: pip install selenium 测试 打开一款Python编辑器,默认Python自带的IDLE也行.创建 baidu.py文件,输入以下内容: from ...

  2. MySQL 按照日期格式查询带有时间戳数据

    按照日期格式查询带有时间戳数据一般在MSQL数据库中的时间都是以时间戳的格式来存储时间的,但是对于我们来说,时间戳格式具体表示的是什么时间,我们很难一眼看出来,所以当我们要具体查询某一个时间或时间段的 ...

  3. selenium模块基础用法详解

    目录 selenium模块 官方文档 介绍 安装 有界面浏览器 无界浏览器 selenium+谷歌浏览器headless模式 基本使用 选择器 基本用法 xpath 获取标签属性 等待元素被加载 隐式 ...

  4. 牛客 216 C 小K的疑惑

    大意: 给定树, 求多少个三元组(i,j,k), 满足dis(i,j)=dis(j,k)=dis(k,i). 刚开始想复杂了, 暴力统计了所有的情况. #include <iostream> ...

  5. 采样方法（二）MCMC相关算法介绍及代码实现

    采样方法(二)MCMC相关算法介绍及代码实现 2017-12-30 15:32:14 Dark_Scope 阅读数 10509更多 分类专栏: 机器学习   版权声明:本文为博主原创文章,遵循CC 4 ...

  6. JavaScript02

    一. 判断// 三元表达式// 循环// 判断: 用的最多的就是if判断// 1.// if(条件){// 当条件满足以后执行的语句// } // 2.// if(条件){// // }else{// ...

  7. 解决 vue 使用 element 时报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf

    在 webpack.config.js 中加入这个依赖 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }

  8. 【Struts2】 国际化

    一.概述 二.Struts2中国际化: 2.1 问题1 全局 局部 2.2 问题2 2.3 问题3 2.4 问题4 在Action中怎样使用 在JSP页面上怎样使用 一.概述 同一款软件 可以为不同用 ...

  9. str 文本函数的调用

    方法 说明 S.isdigit() 判断字符串中的字符是否全为数字 S.isalpha() 判断字符串是否全为英文字母 S.islower() 判断字符串所有字符是否全为小写英文字母 S.isuppe ...

  10. 【2017-06-02】Linq高级查询，实现分页组合查询。

    1.以XXX开头 2.以XXX结尾 3.模糊查询 4.求个数 5.求最大值 6.求最小值 7.求平均值 8.求和 9.升序 10.降序 11.分页 Skip()跳过多少条 Take()取多少条 12. ...