今天给大家分享一种用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. JVM锁优化

    1. 概述 JDK1.6版本花费了大量精力去实现各种锁优化,如适应性自旋,锁消除,锁粗化,轻量级锁,偏向锁等,这些技术都是为了在线程期间更高效的共享数据,以及解决竞争问题. 2. 自旋锁与自适应自旋 ...

  2. [原创]Base32加密解密工具

    工具: Base32_Decode编译: VS2012  C# (.NET Framework v2.0)组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http://qqhack8. ...

  3. widows本地-xshell实现远程连接linux服务器图形界面

    本地环境远程连接linux图形界面,常用的实现工具有,VNC.Puty.Xshell等,这里我们用的xshell manager: Xmanager简介:Xmanager是一个运行于 Windows平 ...

  4. Hadoop环境搭建及wordcount程序

    目的: 前期学习了一些机器学习基本算法,实际企业应用中算法是核心,运行的环境和数据处理的平台是基础. 手段: 搭建简易hadoop集群(由于机器限制在自己的笔记本上通过虚拟机搭建) 一.基础环境介绍 ...

  5. PHP使用APC获取上传文件进度

    今天发现使用PHP的APC也能获取上传文件的进度.这篇文章就说下如何做. 安装APC 首先安装APC的方法和其他PHP模块的方法没什么两样,网上能找出好多 phpinfo可以看到APC的默认配置有: ...

  6. 九、将cs文件快速的转换成可执行文件和响应文件(配置编译开关的文件)

    1.将包含多个类型的源代码文件转换为可以部署的文件.有如下Program.cs的文件,代码如下: public sealed class Program { public static void Ma ...

  7. C#读取注册表中二进制类型的值（REG_BINARY）

    如需要读取注册表中某个键的值, 例如读取DriverDesc对应的值,一般情况下为String类型,读取代码如下: RegistryKey driverKey = Registry.LocalMach ...

  8. idea @Override is not allowed when implementing interface method

    转自:http://blog.csdn.net/shenya2/article/details/50460447 在编码过程发现报错:@Override is not allowed when imp ...

  9. JS脚本动态给元素/控件添加事件

    最近突然要用到JS脚本动态给元素添加事件.如TextBox的onclick事件.但有的onclick事件原先已经定义了相应代码!这里又不能替代原有方法,而JS脚本里面有个方法可以给控件在原有事件的基础 ...

  10. offsetTop、offsetLeft、offsetWidth、offsetHeight的用法

    假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...