列表展开

最新推荐文章于 2023-10-21 18:49:23 发布

紫晓宁

最新推荐文章于 2023-10-21 18:49:23 发布

阅读量371

点赞数

分类专栏：前端web 文章标签：列表展开后台管理

本文链接：https://blog.csdn.net/zixiaoning/article/details/52071280

版权

前端web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>列表展开效果</title>
    <style>

        *{ margin:0; padding:0; list-style:none; font-family:"微软雅黑";}
        #friend{ width:300px; margin:50px auto 0; border-left:1px solid #ccc; border-right:1px solid #dadada;}
        #friend h2{ width:270px; height:35px; line-height:35px; padding-left:30px; background:url(img/icon_lft.png) 10px no-repeat #74a400; color:#fff; font-size:16px; font-weight:100; cursor:pointer;}
        #friend h2.hover{ background:url(img/icon.png) 10px no-repeat #74a400;}
        #friend li{ margin-bottom:1px;}
        #friend li ul li{ width:270px; padding-left:30px; height:30px; line-height:30px; border-bottom:1px solid #ccc; cursor:pointer;}
        /*#friend li ul li:hover,#friend li ul li.hover{ background:#EFF4E0;}*/
        #friend li ul .hover{ background:#EFF4E0;}
        #friend li ul .active{ background:#FFC;}
        #friend li ul{ display:none;}
        #friend li ul.hover{ display:block;}
    </style>
    <script>

        window.onload = function (){
            //获取模块标签名
            var oUl = document.getElementById('friend');
            var aLi = oUl.getElementsByTagName('li');
            var aH = oUl.getElementsByTagName('h2');
            var aUl = oUl.getElementsByTagName('ul');
            var aLi = null;
            var arrLi = [];

            // ali每个ul中li的集合
            for ( var i=0; i< aUl.length; i++ ) {
                aLi = aUl[i].getElementsByTagName('li');
                for ( var j=0; j< aLi.length; j++ ) {
                    arrLi.push( aLi[j] );//把所有li元素放入li列表数组中
                }
            }
            // alert( arrLi.length );

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

                aH[i].index = i;//标题数组

                aH[i].onclick = function () {
                      //点击时，不是当前index=this  隐藏H和ul的class类的样式
                    for ( var i=0; i<aH.length; i++ ) {
                        if ( this != aH[i] ) {
                             aH[i].className = '';
                             aUl[i].className = '';
                        }
                    }
                  //对当前index=this class类样式进行修改： 显示和隐藏
                    if ( this.className == '' ) {
                        this.className = 'hover';
                        aUl[this.index].className = 'hover';
                    } else {
                        this.className = '';
                        aUl[this.index].className = '';
                      //获取当前index=index的li数组 显示
                        var aLi = aUl[this.index].getElementsByTagName('li');
                        for ( var i=0; i<aLi.length; i++ ) {
                            aLi[i].className = '';
                            aLi[i].onOff = true;
                        }

                    }
                };
            }
           //对所有的li标签处理 over和out事件的样式
            for ( var i=0; i<arrLi.length; i++ ) {

                arrLi[i].onOff = true;
              //鼠标悬空
                arrLi[i].onmouseover = function () {
                    if ( this.onOff ) {
                        this.className = 'active';
                    }
                };
                //鼠标离开
                arrLi[i].onmouseout = function () {
                    if ( this.onOff ) {
                        this.className = '';
                    } else {
                        this.className = 'hover';
                    }
                };
               //鼠标点击
                arrLi[i].onclick = function () {

                    for ( var i=0; i<arrLi.length; i++ ) {
                        if ( this != arrLi[i] ) {
                            arrLi[i].className = '';
                            arrLi[i].onOff = true;
                        }
                    }

                    if ( this.onOff ) {
                        this.className = 'hover';
                        this.onOff = false;
                    } else {
                        this.className = '';
                        this.onOff = true;
                    }
                };
            }

        }
    </script>
</head>
<body>
<ul id="friend">

    <li>
        <h2 class="">导师篇</h2>
        <ul class="">
            <li>导师信息</li>
            <li>研究方向</li>
            <li>研究团队</li>
            <li>就业方向</li>
        </ul>
    </li>
    <li>
        <h2 class="">考研资讯</h2>
        <ul class="" >
            <li>历年真题</li>
            <li>考前资讯</li>
            <li>考研心得</li>
            <li>复试之路</li>
            <li>相关视频</li>
        </ul>
    </li>
    <li>
        <h2 class="">生活篇</h2>
        <ul  class="">
            <li>驴友生活</li>
            <li>比赛活动</li>
            <li>时光纪念馆</li>
        </ul>
    </li>
</ul>
</body>
</html>

紫晓宁

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
列表展开

html>html lang="en">head> meta content="text/html; charset=utf-8" http-equiv="Content-Type"> title>列表展开效果title> style> *{ margin:0; padding:0; list-style:none; font-family:"微软雅黑
复制链接

扫一扫