JS练习--嵌套列表（for循环）

Posted 2020-06-23 洛水三千

CSS:

*{padding: 0;margin: 0;}
ul,li{list-style: none;}
.cont{
    width: 600px;
    margin:30px auto;
}
.cont h3{
    border-bottom: 2px solid #bbb;
    width: 100%;
    height: 38px;
}
#ul1{
    position: relative;
    width: 100%;
}
#ul1>li{
    float: left;
    margin-top: 15px;
    margin-left: 15px;
    position: relative;
}
.pro{
    width: 180px;
    height: 200px;
    overflow: hidden;
}
.pro img{
    width: 180px;
    height: 150px;
    overflow: hidden;
}
.pro p{
    text-align: center;
}
.hidden{
    display: none;
}
.active{
    width: 300px;
    height: 120px;
    padding: 10px;
    overflow: hidden;
    position: absolute;
    top: -80px;
    left: 20px;
    display: block;
    background: #eee;
    border: 1px solid #ccc;
    z-index: 1;
}
.active li{
    color: #e4007e; 
    font-size: 14px;
    padding-left: 12px;
    height: 30px;
    line-height: 30px;
}

/* 清除浮动 */
.clearfix{
    zoom: 1;
}
.clearfix:after{ 
    content: ‘.‘;
    height: 0;
    display: block;
    clear: both;
    visibility: hidden;
}

html:

<div class="cont">
    <h3>最近更新</h3>
    <ul id="ul1" class="clearfix">
        <li>
            <div class="pro">
                <img src="img/small.jpg">
                <p>开心一刻</p>
                <p>动漫类</p>
            </div>
            <ul class="hidden">
                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>
                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>
                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>
            </ul>
        </li>
        <li>
            <div class="pro">
                <img src="img/small-02.jpg">
                <p>盆景养成记</p>
                <p>植物类</p>
            </div>
            <ul class="hidden">
                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>
                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>
                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>
            </ul>
        </li>
        <li>
            <div class="pro">
                <img src="img/small-03.jpg">
                <p>盆景养成记</p>
                <p>植物类</p>
            </div>
            <ul class="hidden">
                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>
                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>
                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>
            </ul>
        </li>
        <li>
            <div class="pro">
                <img src="img/small-04.jpg">
                <p>插花艺术</p>
                <p>艺术类</p>
            </div>
            <ul class="hidden">
                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>
                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>
                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>
            </ul>
        </li>
        <li>
            <div class="pro">
                <img src="img/small-05.jpg">
                <p>插花艺术</p>
                <p>艺术类</p>
            </div>
            <ul class="hidden">
                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>
                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>
                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>
            </ul>
        </li>
        <li>
            <div class="pro">
                <img src="img/small-06.jpg">
                <p>开心一刻</p>
                <p>动漫类</p>
            </div>
            <ul class="hidden">
                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>
                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>
                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>
            </ul>
        </li>
    </ul>
</div>

JS:

<script type="text/javascript">
    var oUl1=document.getElementById(‘ul1‘);
    var aUl=oUl1.getElementsByTagName(‘ul‘);//ul数组
    var aDiv=oUl1.getElementsByTagName(‘div‘);

    for (var i = 0; i < aDiv.length; i++) {

        aDiv[i].index=i;//索引值

        //鼠标经过当前div时，当前li下的div内容显示
        aDiv[i].onmouseover=function(){

            aUl[this.index].className=‘active‘;
        }

        //鼠标离开当前div时，当前li下的div内容隐藏
        aDiv[i].onmouseout=function(){

            aUl[this.index].className=‘hidden‘;
        }
    };

</script>