2020-07-12 JS学习 设置二级导航栏动态效果

1、html代码写出一个二级导航栏(如果js有涉及获取节点之类的，元素之间不可以有换行和空格)

<div id="nav">
    <ul>
        <li>
            <a href="#">公司介绍</a>
            <ul>
              <li class="show"><a href="#">公司形象</a></li>
              <li><a href="#">公司荣誉</a></li>
              <li><a href="#">公司文化</a></li>
              <li><a href="#">形象</a></li></ul>
        </li>
        <li>
          <a href="#">产品</a>
          <ul>
            <li><a href="#">公司形象</a></li>
            <li><a href="#">公司荣誉</a></li>
            <li><a href="#">公司文化</a></li>
            <li><a href="#">形象</a></li></ul>
        </li>
        <li>
            <a href="#">联系我们</a>
            <ul>
              <li><a href="#">公司形象</a></li>
              <li><a href="#">公司荣誉</a></li>
              <li><a href="#">公司文化</a></li>
            </ul>
        </li>
    </ul>
</div>

大概的结构就是这样，图片有些难看，后期再用visio画一遍

2020-07-13_001253.png

2、CSS样式设置

#nav{
    width: 800px;
    height: auto;
    position: relative;
    overflow: auto;
    background: rgba(0,0,0,0.5);
}
#nav ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#nav>ul>li{
    width: 120px;
    height: auto;
    float: left;
    text-align: center;
    border:1px solid #FFFFFF;
}
#nav>ul>li>a{
    display: block;
    text-decoration: none;
    background: #f00;
    color: #FFFFFF;
    line-height: 30px;
}
#nav>ul>li>a.bg{
    background: #00FF00;
}
#nav>ul>li>ul{
    display: none;
}
#nav>ul>li>ul.show{
    display: block;
}

3、js方法

var div=document.getElementById('nav');//获得导航栏最高级的div对象
var dul=div.children[0];//一级导航ul：div>ul
var lis=dul.children;//一级导航栏内容，也是二级导航栏的标题：div>ul>li
for(var i=0;i<lis.length;i++){
    lis[i].onmouseover=function(){//鼠标经过时触发的函数
        this.children[1].setAttribute('class','show');//对二级导航ul的class设置
        this.children[0].setAttribute('class','bg');//对a的class设置，a也是二级导航栏的标题
    }
    lis[i].onmouseout=function(){//鼠标移开时触发的函数
        this.children[1].removeAttribute('class');
        this.children[0].removeAttribute('class');//删除class属性
    }
}

4、最后的实现效果就是这个样子，更多的样式还是要看情况自己设置

鼠标移开二级导航栏隐藏： onmouseout.png
鼠标经过二级导航栏弹出： onmouseover.png