布局：左侧菜单栏+右侧内容（改进版，有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: 0;
    padding: 0;
    list-style: none;
}
html,body{
    height: 100%
}
.wrap{
    height: 100%;
    display: flex;
}
.left{
    width: 30%;
    height: 100%;
    overflow-y: auto;
    color: #7a7a7a;
}
.right{
    flex: 1;
    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'