今天给大家分享一种用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. SQL Server清理大日志文件方法 不分离数据库 执行SQL语句即可

    SQL 2008清空日志的SQL语句如下: USE[master] GO ALTER DATABASE 要清理的数据库名称 SET RECOVERY SIMPLE WITH NO_WAIT GO AL ...

  2. ssm中返回中文字符串时出现乱码？

    问题:返回json格式时,前端ajax请求,响应数据接收正常:     返回String时,响应数据是乱码? 解决:@RequestMapping注解中添加:produces = "text ...

  3. Hive在drop表的时候报错

    问题背景: 在安装完Hive之后,初始化mysql是成功的,hive启动也是成功的,也能创建database,在database中也能创建表,也能查看表结构,但是在drop的时候就不行了,在hive ...

  4. AutoCompleteTextView搭配Poi搜索实现多项选择

    项目需要 需要用到AutoCompleteTextView控件,在输入之后能在下方产生一个推荐结果的列表,就类似于金山词霸一类软件.输入一两个字符就能出来一系列类似的的单词, 这里做的例子是输入城市名 ...

  5. 设置Jmeter默认为中文， 就是这么简单！

    Jmeter默认加载的全英文,想要看的更加明白,想到的就是汉化了. Jmeter汉化真的非常简单,意料之外的简单,只需要到配置文件 jmeter.properties ,将里面的 “#language ...

  6. Oracle修改日志归档模式、归档路径以及空间大小的相关测试

    ORACLE 创建数据库的时候要不要开启日志归档? oracle数据库可以运行在2种模式下:归档模式(archivelog)和非归档模式(noarchivelog) .归档模式可以提高Oracle数据 ...

  7. 自定义 Scrapy 爬虫请求的 URL

    之前使用 scrapy 抓取数据的时候 ,默认是在逻辑中判断是否执行下一次请求 def parse(self): # 获取所有的url,例如获取到urls中 for url in urls: yiel ...

  8. Choose GitLab for your next open source project

    原文:https://b.agilob.net/choose-gitlab-for-your-next-project/ GitLab.com is a competitor of GIthub. I ...

  9. org.jeecgframework.core.common.exception.MyExceptionHandler]java.lang.NullPointerException

    问题原因:

  10. 学会四招让你在linux下安装程序变得简单

    一.背景 由于最近想自己摸索一些linux下的东西,开始玩起了Linux系统,在安装软件的过程中有诸多的不解和困惑,现在终于搞明白了具体是怎么样的安装步骤和过程,先分享给你们同时也方便自己复习查阅. ...