JS产品分类列表练习

Posted 2020-06-23 洛水三千

CSS:

*{padding: 0;margin: 0;}
    ul,li{list-style: none;}
    body{color: #666;background: #f5f5f5;}
    a{text-decoration: none;color: #666;}
    .cont{
        width: 400px;
        margin: 30px auto;
        position: relative;
        background: #fff;
        box-shadow: 2px 2px 5px #e6e2e2;
    }
    .tit_1,.tit_2,.tit_3,.tit_4{/*分类标题样式*/
        height: 44px;
        line-height: 44px;
        position: relative;
        padding-left: 40px;
    }
    .tit_1:before{/*标题部分的小三角形*/
        content: ‘‘;
        position: absolute;
        left: 15px;
        top: 12px;
        border:10px solid transparent;
        border-left-color:#ccc;
    }
    .tit_2:before{/*标题部分的小三角形*/
        content: ‘‘;
        position: absolute;
        left: 15px;
        top: 12px;
        border:10px solid transparent;
        border-left-color:#fff;
    }
    
    .tit_3:before{/*标题部分的小三角形*/
        content: ‘‘;
        position: absolute;
        left: 15px;
        top: 17px;
        border:10px solid transparent;
        border-top-color:#ccc;
    }
    .tit_4:before{/*标题部分的小三角形*/
        content: ‘‘;
        position: absolute;
        left: 15px;
        top: 17px;
        border:10px solid transparent;
        border-top-color:#fff;
    }
    .active{/*列表内容的样式*/
        height: 28px;
        line-height: 28px;
        padding-left: 40px;
        cursor: pointer;
    }
    #ul1{
        padding: 20px 0;
    }
    
    .hidden{/*隐藏列表内容*/
        display: none;
    }
    .on{/*显示列表内容*/
        display: block;
    }

html:

<div class="cont">
    <ul id="ul1">
        <li>
            <h3 class="tit_1">护肤用品</h3>
            <ul class="hidden">
                <li>面部卸妆</li>
                <li>眼部护理</li>
                <li>卸妆油</li>
                <li>卸妆棉</li>
            </ul>
        </li>
        <li>
            <h3 class="tit_1">彩妆香水</h3>
            <ul  class="hidden">
                <li>隔离霜</li>
                <li>BB霜</li>
                <li>粉底液</li>
                <li>腮红</li>
                <li>唇彩</li>
            </ul>
        </li>
        <li>
            <h3 class="tit_1">个人护理</h3>
            <ul class="hidden">
                <li>头发护理</li>
                <li>洗发水</li>
                <li>发膜</li>
                <li>焗油</li>
                <li>护发素</li>
            </ul>
        </li>
        <li>
            <h3 class="tit_1">香水香氛</h3>
            <ul class="hidden">
                <li>女士香水</li>
                <li>淡香水</li>
                <li浓香水</li>
                <li>男士香水</li>
                <li>古龙香水</li>
                <li>运动香水</li>
            </ul>
        </li>
    </ul>
</div>

JS:

<script type="text/javascript">
    var oUl=document.getElementById(‘ul1‘);
    var aUl=oUl.getElementsByTagName(‘ul‘);
    var aH=oUl.getElementsByTagName(‘h3‘);
    var aLi=null;
    var len=aUl.length;

    for (var i = 0; i <len; i++) {
        aLi=aUl[i].getElementsByTagName(‘li‘);
        for (var j = 0; j < aLi.length; j++) {
            aLi[j].className=‘active‘;
            aLi[j].onmouseover=function(){
                //鼠标经过当前li，文字颜色发生变化
                this.style.color=‘#e4007e‘;/*alert(4);*/
            }
            aLi[j].onmouseout=function(){
                //鼠标离开当前li，文字颜色恢复原样
                this.style.color=‘#666‘;
            }
        };
    };

    for (var i = 0; i < aH.length; i++) {
        aH[i].index=i;
        //鼠标经过当前h3时，背景色、字体颜色改变
        aH[i].onmouseover=function(){
            this.style.backgroundColor=‘#e4007e‘;
            this.style.color=‘#fff‘;
            //判断当前列表li下的内容是否展开
            if (aUl[this.index].className==‘hidden‘) {
                this.className=‘tit_2‘;//列表内容隐藏时，小三角形的样式tit_2
            }
            else{
                this.className=‘tit_4‘;//列表内容展开时，小三角形的样式tit_4
            };
        }
        aH[i].onmouseout=function(){
            this.style.backgroundColor=‘#fff‘;
            this.style.color=‘#666‘;
            //判断当前列表li下的内容是否展开
            if (aUl[this.index].className==‘hidden‘) {
                this.className=‘tit_1‘;//列表内容展开时，小三角形的样式tit_1
            }
            else{
                this.className=‘tit_3‘;//列表内容展开时，小三角形的样式tit_3
            };
        }

        aH[i].onclick=function(){
            //点击当前h3，如果列表下的内容隐藏，则将其显示出来，否则隐藏起来
            if (aUl[this.index].className==‘hidden‘) {
                aUl[this.index].className=‘on‘;
                this.className=‘tit_4‘;
            }
            else{
                aUl[this.index].className=‘hidden‘;
                this.className=‘tit_2‘;
            };
        }
        /*alert(1);*/
    };
</script>