JS写的二级导航栏(利用冒泡原理)

前端之家收集整理的这篇文章主要介绍了JS写的二级导航栏(利用冒泡原理)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏
这种方法要比其他方法代码量少很多,但是需要对有一定的理解,如果需要理解冒泡可以参考一下,
该注释的地方我都给大家注释上了
 
思路:给所有的 li 加上 鼠标移入事件当鼠标移入时会触发事件,由于事件的冒泡机制,每次二级导航栏里的事件触发时同时会触发父级 li 的事件
   调试时可以用e.stopPropagation()阻止事件冒泡来看看冒泡和不冒泡的区别
 
    <Meta charset="UTF-8">
    Document
    
        
        
  •             
                  
              
              
    •             
                    
                
            
        获取父级元素
        获取导航栏中所有的li
        添加一个鼠标移入事件(主要应用冒泡的原理,但是效率可能有点低)
        SEOver = function() {
        标签添加active
         
        显示
        获取ul 判断是否存在ul,若存在则显示ul
                 ul.style.display = "block";} 
           
        标签的颜色移除
        SEOut = function() {
        标签去除active

        猜你在找的JavaScript相关文章