今天给大家分享一种用JS写的导航栏，虽然我们工作中不会使用JS来做导航栏，为了练习我们用JS来做一个JS导航栏
这种方法要比其他方法代码量少很多，但是需要对事件冒泡有一定的理解，如果需要理解冒泡可以参考一下，
该注释的地方我都给大家注释上了
 
思路：给所有的 li 加上 鼠标移入事件当鼠标移入时会触发事件，由于事件的冒泡机制，每次二级导航栏里的事件触发时同时会触发父级 li 的事件
   调试时可以用e.stopPropagation()阻止事件冒泡来看看冒泡和不冒泡的区别
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;}
        /* 一级导航样式 */
        #nav{
            width:100%;
            height: 40px;
            background: #000;
        }
        #nav>li{
            float: left;
            position: relative;
        }
        #nav>li>a{
            float: left;
            width: 80px;
            height: 40px;
            color: #fff;
            text-decoration: none;
            line-height: 40px;
            text-align: center;
        }
        
        #nav li>.active{
            background: yellow;
        }
        #nav>li>ul>li>.active{
            background: red;
        }
        #nav>li>ul{
            width: 100px;
            background: #000;
            position: absolute;
            left: 0;
            top: 40px;
            display: none;
        }
        #nav>li>ul>li>a{
            text-decoration: none;
            color: #fff;
            line-height: 30px;
            text-align: center;
            width: 100px;
            height: 30px;
            display: block;
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li>
            <a href="##">首页</a>
            <ul >
                <li><a href="##">首页1</a></li>
                <li><a href="##">首页1</a></li>
                <li><a href="##">首页1</a></li>
                <li><a href="##">首页1</a></li>
                <li><a href="##">首页1</a></li>
            </ul>
        </li>
        <li>
            <a href="##">文档</a>
            <ul>
                <li><a href="##">文档1</a></li>
                <li><a href="##">文档1</a></li>
                <li><a href="##">文档1</a></li>
                <li><a href="##">文档1</a></li>
                <li><a href="##">文档1</a></li>
            </ul>
        </li>
        <li>
            <a href="##">我的</a>
            <ul>
                <li><a href="##">我的1</a></li>
                <li><a href="##">我的1</a></li>
                <li><a href="##">我的1</a></li>
                <li><a href="##">我的1</a></li>
                <li><a href="##">我的1</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>
<script>
//先获取父级元素
var oNav = document.getElementById("nav"); 
//获取导航栏中所有的li
var aLi = oNav.querySelectorAll("li");
//鼠标移入二级导航出现 
for(var i=0;i<aLi.length;i++){
    //给每一个li添加一个鼠标移入事件(主要应用冒泡的原理，但是效率可能有点低)
    aLi[i].onmouseover = function() {
         //给a标签添加active
         var a = this.children[0];
         a.className ="active";
 
         //将二级导航显示
         //获取ul 判断是否存在ul，若存在则显示ul
         var ul = this.children[1];       
         if(ul){
         ul.style.display = "block";} 
      //e.stopPropagation()在此将事件冒泡阻止试试
    }
    //鼠标移出的时候将a标签的颜色移除
    aLi[i].onmouseout = function() {
         //给a标签去除active
         var a = this.children[0];
         a.className ="";
         //将二级导航隐藏
         var ul = this.children[1];
         if(ul){    // if（ul）表示存在ul这个东西
            ul.style.display = "none";
             console.log(111);
         }
    }
}
</script>

JS写的二级导航栏（利用冒泡原理）的更多相关文章

  1. css+js实现自动伸缩导航栏

    用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...

  2. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

  3. [前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）

    在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...

  4. 用原生JS写省市二级联动

    HTML代码 <select id="s1"> <option value="0">~请选择省份~</option> < ...

  5. 使用『jQuery』『原生js』制作一个导航栏动效 —— { }

    效果 HTML部分 <body> <nav> <div id="nav1">导航1</div> <div id="n ...

  6. JS自适应导航栏,菜单栏

    1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 <link rel="stylesheet" href=& ...

  7. 原生js实现导航栏吸顶

    实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...

  8. ElementUI 复杂顶部和左侧导航栏实现

    描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...

  9. iOS开发笔记1:[转]导航栏里的"Back"按钮显示不出来

    最近项目中遇到一个问题,push过去的ViewController的Nav上面没有返回按钮,遂搜索资料,找到了以下文档.经测试i,问题解决. 原文地址:http://www.cnblogs.com/s ...

随机推荐

  1. spring-boot集成thymeleaf。

    thymeleaf是前台页面展示,原来一直是jsp,jsp中包含很多服务器端的逻辑,逐渐淘汰.同样功能的还有freemarker.孰好孰坏不予评价,只做简单实现. 1.基本思路 (1)pom.xml中 ...

  2. python 数据库连接及操作

    Python DB-API使用流程: 引入API模块. 获取与数据库的连接. 执行SQL语句和存储过程. 关闭数据库连接. def mysql_dbtest(): config = { 'host': ...

  3. (转)【深度长文】循序渐进解读Oracle AWR性能分析报告

    原文:https://dbaplus.cn/news-10-734-1.html https://blog.csdn.net/defonds/article/details/52958303 作者介绍 ...

  4. SpringSecurity学习之自定义过滤器

    我们系统中的认证场景通常比较复杂,比如说用户被锁定无法登录,限制登录IP等.而SpringSecuriy最基本的是基于用户与密码的形式进行认证,由此可知它的一套验证规范根本无法满足业务需要,因此扩展势 ...

  5. Docker概念学习系列之Docker的主要目标（2）

    不多说,直接上干货! Docker的主要目标: 见[博主]撰写的https://mp.weixin.qq.com/s/ELYUgMpQOhVvTsNCHQLELg 通过对应用组件的封装.分发.部署.运 ...

  6. spring security的简单应用

    本文只包涵spring security配置部分,不是一个完整项目,不过可以任意添加到一个web项目中,不需要对原来的程序做任何修改 部分内容来源于网络,如有雷同,毫无意外 1.xml配置文件 < ...

  7. hibernate对连接池的支持和HQL查询

    hibernate对连接池的支持 连接池, 作用: 管理连接:提升连接的利用效率! 常用的连接池: C3P0连接池 Hibernate 自带的也有一个连接池,且对C3P0连接池也有支持! 只维护一个连 ...

  8. 浅析Session和Cookie

    Cookie   Cookie的作用,就是当一个用户通过http访问一个服务器时,这个服务器会将一些key/value键值对返回给客户端浏览器,并给这些数据加上一些限制条件,在条件符合时这个用户访问该 ...

  9. OopMap介绍

    摘自:http://blog.csdn.net/woaigaolaoshi/article/details/51439227 在HotSpot中,对象的类型信息里有记录自己的OopMap,记录了在该类 ...

  10. Linux下自动清理超过指定大小文件的方法

    由于线上业务用的squid,根据经验值如果长时间运行则缓存目录下的swap.state会慢慢变大,一旦超过60M,squid的性能就会急剧下降,因此需要定时去清理大于60M的swap.state文件. ...