左侧菜单栏右侧内容（改进，有js效果）

（如有错敬请指点，以下是我工作中遇到并且解决的问题）上一篇文章是简洁版

这是上一篇文章的改进。

上一篇文章的左侧菜单是没有子目录的。

这是效果图：

主要改动：

对样式进行删减和优化。

重点就是js部分了。

点击一级目录时二级目录的第一个元素默认active，即在点击一级目录时可以立刻请求接口获取第一个子元素的数据，当点击第二个元素时再获取第二个子元素的数据。

再结合加载图使用，就更好了。

代码如下：

HTML:

<div class="wrap">

    <ul class="left">

        <li class="ma-li">

            <p>大分类</p>

            <ul>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

            </ul>

        </li>

        <li class="ma-li">

            <p>大分类</p>

            <ul>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

            </ul>

        </li>

        <li class="ma-li">

            <p>大分类</p>

            <ul>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

            </ul>

        </li>

        <li class="ma-li">

            <p>大分类</p>

            <ul>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

            </ul>

        </li>

        <li class="ma-li">

            <p>大分类</p>

            <ul>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

                <li class="pa-li">小分类</li>

            </ul>

        </li>

    </ul>

    <ul class="right">

        <li class="right-list">水果</li>

        <li class="right-list">水果</li>

        <li class="right-list">水果</li>

        <li class="right-list">水果</li>

        <li class="right-list">水果</li>

        <li class="right-list">水果</li>

        <li class="right-list">水果</li>

        <li class="right-list">水果</li>

        <li class="right-list">水果</li>

        <li class="right-list">水果</li>

        <li class="right-list">水果</li>

    </ul>

</div>

CSS:

*{

    margin:;

    padding:;

    list-style: none;

}

html,body{

    height: 100%

}

.wrap{

    height: 100%;

    display: flex;

}

.left{

    width: 30%;

    height: 100%;

    overflow-y: auto;

    color: #7a7a7a;

}

.right{

    flex:;

    height: 100%;

    overflow-y: auto;

    color: #373737;

}

.ma-li,.pa-li,.right-list{

    font-size: 16px;

    line-height: 45px;

}

.ma-li p,.right-list{

    padding-left: 20px;

    border-bottom: 1px solid #e5e2dc;

}

.ma-li.active p{

    border-left: 5px solid #1657c9;

    padding-left: 15px;

}

.ma-li.active ul{

    border-bottom: 1px solid #e5e2dc;

}

.pa-li{

    padding-left: 20px;

}

.pa-li.active{

    color: #1657c9

}

JAVASCRIPT:

var _leftMain = document.getElementsByClassName('left')[0];

var _leftMaLi = _leftMain.getElementsByClassName('ma-li');

var _leftMaliUl = _leftMain.getElementsByTagName('ul');

var index = 0;

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

    _leftMaLi[i]['data-index'] = i

    if(_leftMaLi[i].className.indexOf('active')==-1){

        _leftMaliUl[i].style.display = 'none'

    }

    _leftMaLi[i].onclick = function (event){

        event = event||window.event;

        if(event.target.tagName == 'P'){

            this.className += ' active';

            index = this['data-index']

            _leftMaliUl[index].style.display = 'block'

            var liChilds = this.getElementsByClassName('pa-li');

            liChilds[0].className += ' active'

            for(var i = 1;i<liChilds.length;i++){

                liChilds[i].className = liChilds[i].className.replace('active', '')

            }

            updateOtherMaLi()

        }else if(event.target.tagName == 'LI'){

            var allLi = event.target.parentNode.children;

            for(var j = 0;j<allLi.length;j++){

                allLi[j].className = allLi[j].className.replace('active', '')

            }

            event.target.className += ' active'

        }

    }

}

function updateOtherMaLi(){

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

        if(i!=index){

            _leftMaLi[i].className = _leftMaLi[i].className.replace('active','')

            _leftMaliUl[i].style.display = 'none'

        }

    }

}

_leftMaLi[index].className += ' active'

_leftMaLi[index].getElementsByClassName('pa-li')[0].className += ' active'

_leftMaliUl[index].style.display = 'block'

巴特西

左侧菜单栏右侧内容（改进，有js效果）

最新文章

热门文章