今天给大家分享一种用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. Java - 基础起步

    package basics; //声明该类所在的包为basics,package为包的关键字 import java.util.Date; //导入java.util包中的Date类,用来封装当前的 ...

  2. Oracle日期格式化以及extract函数的使用

    由于业务需要,这两天在学习Oracle,发现Oracle里面的日期它会给你转成一种很不习惯的格式,于是想着怎么样把它弄成年.月.日的格式来显示,查资料.看文档,最终找到解决办法了,其实是用到了to_c ...

  3. Golang 中哪些值是不可以寻址的

    不可以寻址, 指的是不能通过&获得其地址. golang中不能寻址的可以总结为:不可变的,临时结果和不安全的.只要符合其中任何一个条件,它就是不可以寻址的. 具体为: 常量的值. 基本类型值的 ...

  4. java单例类的几种实现

    一,最简单的方式 public class Singleton{ private Singleton(){}; private static Singleton instance = new Sing ...

  5. VScode中支持Python虚拟环境

    要在VScode中使用Python的virtualenv虚拟环境,首先在设置同添加虚拟环境所在目录和虚拟环境的识别规则: { ... "python.venvPath": &quo ...

  6. spring cloud开发、部署注意

    一.开发时,配置服务的配置使用本地路径,不使用svn和git,因为后者每个开发人员都会修改配置,导致别人也拿到其他人修改的配置,本地配置示例如下: spring: application: name: ...

  7. 深入理解Spring的ImportSelector接口

    ImportSelector接口是至spring中导入外部配置的核心接口,在SpringBoot的自动化配置和@EnableXXX(功能性注解)都有它的存在,关于SpringBoot的分析可以参考:深 ...

  8. 深入理解Spring的异步机制

    一.Spring中实现异步执行 在这里我先以事件的机制举例,注意默认情况下事件的发布与监听都是同步执行的.那么我们来看一看基于异步事件的例子该怎么写 首先还是定义事件: package com.bdq ...

  9. Window服务与Quartz.NET

    Quartz.NET: http://quartznet.sourceforge.net/ (现为2.2版本) Sourceforge:http://sourceforge.net/projects/ ...

  10. charles撰写工具/compose和Compose New

    撰写工具/compose和Compose New compose 是在原有的请求基础上,修改: compose New 是新出一个弹窗,自己手动一个个的去写: 可以写各种状态:– URL:– Meth ...