今天给大家分享一种用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. linux防火墙（三）—— iptables语法之匹配条件

    一.iptables规则的匹配条件类型有三类 1.通用匹配:可直接使用,不依赖于其他条件或扩展,包括网络协议.IP地址.网络接口等条件 2.隐含匹配:要求以特定的协议匹配作为前提,包括端口.TCP标记 ...

  2. SDK 上报信息 史上最全 持续更新

    SDK 上报信息 史上最全 持续更新 接入SDK总会遇到各种需求,有些SDK巴不得把玩家信息全部上报到他们服务器! 以下是我接SDK遇到的, 欢迎大家补全. 上报事件 注册(按道理这个应该是SDK的功 ...

  3. 【xsy2425】容器 dp

    题目大意:有$n$个人,区间大小为$m$,每个人必须覆盖一段区间$[l_i,r_i]$,问你存在多少种不同的覆盖方案,使得区间上每个位置被覆盖的次数不超过$t$. 两种方案被定义为不同当且仅当存在第i ...

  4. Scala使用隐式转换进行比较

    Boy.scala class Boy(val name: String, val faceValue: Int) extends Comparable[Boy]{ override def comp ...

  5. web工程迁移---weblogic8迁移到jboss5遇到的异常

    原有的web工程是在weblogic8上运行的,但现在的要求是要运行到jboss5中,为如后迁移到更高版本的jboss做准备 由于我对weblogic没有过研究,所以之前的步骤都是有别人进行的,在进行 ...

  6. Redis学习系列三List列表

    一.简介 Redis中的列表相当于C#中的LinkedList,也就是链表,如果你研究过链表这个数据结构,肯定知道.它的插入和删除是非常快的,但是定位却很慢,因为必须遍历所有的元素,才能找到对应的值, ...

  7. 常见数据结构的Java实现

    单链表的Java实现 首先参考wiki上的单链表说明,单链表每个节点包含数据和指向链表中下一个节点的指针或引用.然后看代码 import java.lang.*; public class Singl ...

  8. 拥抱了IDEA却发现再也回不去Eclipse...

    一.背景 还记得去年入职的时候,发现很多同事都在用Intellij IDEA,其实在那之前都已经接触过,只不过没有在开发中实际应用而已. 这时候我下定决心要拥抱IDEA了,尤其被它酷酷的黑色主题所吸引 ...

  9. [Python学习笔记-003] 使用PyOTP获取基于OTOP算法的动态口令

    建立安全的VPN连接,不仅需要输入用户名和密码,还需要输入动态口令(token).作为一个懒人,我更喜欢什么手工输入都不需要,既不需要输入password,也不需要输入token.也就是说,只需一个命 ...

  10. linux下更改时区

    起因: 装系统时一走神把时区选错了,导致时间不正确,但是又不想重装,所以找了一下解决方法. 解决方案: 我的环境时这样的,其他的环境没试过. [root@werserver01 ~]# cat /et ...