布局：左侧菜单栏+右侧内容（改进版，有js动画效果）

littleHiuman

于 2016-09-09 10:25:42 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： JavaScript

本文链接：https://blog.csdn.net/hiumanChung/article/details/84816546

版权

本文介绍了如何改进左侧菜单栏布局，增加了JavaScript动画效果。当点击一级目录时，二级目录的第一个元素会默认显示并加载数据，依次点击其他元素时再动态加载相应数据，同时结合加载图提升用户体验。

摘要由CSDN通过智能技术生成

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

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

这是效果图：

主要改动：

对样式进行删减和优化。

重点就是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>
            </