三级侧边栏-树形菜单案例效果

效果图：

本次制作要点：

html：

结构上，要把li内部的文字和待展开的元素分开来，便于后期样式上的把控和逻辑上的处理。

<div class="sidebar-list">
          <ul class="first-class">
            <li class="first-class-li cur"><a href="javascript:;"><i class="icon icon-activity"></i>个人报表</a>
              <ul class="sec-class" style="display:block;">
                <li class="sec-class-li cur"><a href="javascript:;"><i class="icon icon-order"></i>今日报表</a>
                  <ul class="thr-class" style="display:block;">
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li>
                    <li class="thr-class-li cur"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li>
                  </ul>
                </li>
                <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-order"></i>历史报表</a>
                  <ul class="thr-class">
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li>
                  </ul>
                </li>
                <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-order"></i>计划报表</a>
                  <ul class="thr-class">
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="first-class-li"><a href="javascript:;"><i class="icon icon-collection"></i>个人收藏</a>
              <ul class="sec-class">
                <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>报表收藏</a>
                  <ul class="thr-class">
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li>
                  </ul>
                </li>
                <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>图片收藏</a>
                  <ul class="thr-class">
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li>
                  </ul>
                </li>
                <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>账户收藏</a>
                  <ul class="thr-class">
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="first-class-li"><a href="javascript:;"><i class="icon icon-share"></i>我的分享</a>
              <ul class="sec-class">
                <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-praise"></i>朋友圈分享</a>
                  <ul class="thr-class">
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-task"></i>报表分享</a></li>
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-picture"></i>图片分享</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="first-class-li"><a href="javascript:;"><i class="icon icon-picture"></i>图库</a>
              <ul class="sec-class">
                <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-computer"></i>本机</a>
                  <ul class="thr-class">
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-camera"></i>相机照片</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="first-class-li"><a href="javascript:;"><i class="icon icon-dynamic"></i>成长记录</a>
              <ul class="sec-class">
                <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-barrage"></i>历史记录</a>
                </li>
                <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-createtask"></i>任务记录</a>
                </li>
              </ul>
            </li>
            <li class="first-class-li"><a href="javascript:;"><i class="icon icon-coupons"></i>账户信息</a>
              <ul class="sec-class">
                <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-workbench"></i>客户端信息</a>
                  <ul class="thr-class">
                    <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-editor"></i>修改信息</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>

 css

样式上：通过一个cur类名，来控制后期的所有选中的效果，

.sidebar-list {
  margin: 0 45px;
}

.sidebar-list a {
  font-size: 16px;
  color: #6e8095;
  font-family: "黑体";
}

.sidebar-list a:hover {
  color: #fff;
}

.sidebar-list .icon {
  margin-right: 5px;
}

.sidebar-list .sec-class-li {
  position: relative;
}

.sidebar-list .sec-class-li:after {
  content: "";
  position: absolute;
  z-index: 10;
}

.sidebar-list .sec-class-li:after {
  top: 21px;
  left: 0;
  width: 6px;
  height: 6px;
  overflow: hidden;
  border-right: 1px solid #6e8095;
  border-bottom: 1px solid #6e8095;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -ms-transition: transform 0.5s;
  transition: transform 0.5s;
}

.sidebar-list .sec-class-li.cur:after {
  top: 19px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -ms-transition: transform 0.5s;
  transition: transform 0.5s;
}

.cur > a {
  color: #fff;
}

.red > a {
  color: red;
}

.first-class li {
  padding-top: 15px;
}

.sec-class, .thr-class {
  display: none;
  margin-left: 22px;
  font-size: 14px;
}

.sec-class > li {
  padding-left: 12px;
}

.sec-class > li:hover {
  color: #fff;
}

js

逻辑上：这次遇到用 “is()” 函数判断列表是否展开，但是未知原因不起效果，所以用了content.clientHeight来通过高度是否已经展开

$(function(){
    $(".first-class>li").click(function(e){
        var $index = $(this).index();
        var $height = $(this).context.clientHeight;
         e = window.event || e;
       e.stopPropagation();
        if($height > 34){
            $(this).removeClass("cur");
            $(this).children(".sec-class").slideUp("fast");
            $(this).children(".sec-class").children("li").children(".thr-class").slideUp("fast");
            $(this).children(".sec-class").children("li").removeClass("cur");
        }else{
            $(this).addClass("cur").siblings("li").removeClass("cur");
            $(this).children(".sec-class").slideDown("fast");
            $(this).siblings("li").children(".sec-class").slideUp("fast");
            $(this).siblings("li").children(".sec-class").children("li").children(".thr-class").slideUp("fast");
            $(this).siblings("li").children(".sec-class").children("li").removeClass("cur");
        }
    });
    $(".sec-class>li").click(function(e){
         e = window.event || e;
       e.stopPropagation();
        var $index = $(this).index();
        var $height = $(this).context.clientHeight;
        if($height > 34){
            $(this).children(".thr-class").slideUp("fast");
            $(this).removeClass("cur");
            $(this).children(".thr-class").children("li").removeClass("cur");
        }else{
            $(this).addClass("cur").siblings("li").removeClass("cur");
            $(this).children(".thr-class").slideDown("fast");
            $(this).siblings("li").children(".thr-class").slideUp("fast");
            $(this).siblings("li").children(".thr-class").children("li").removeClass("cur");
        }
    });
    $(".thr-class>li").click(function(e){
         e = window.event || e;
       e.stopPropagation()
        $(this).addClass("cur").siblings("li").removeClass("cur");
        var question = confirm("你确定要跳转新页面吗","跳转成功");
        if(question){
            alert("恭喜答对了！")
        }else{
            alert("很遗憾，链接无效！")
        }
    })

})

 js懒得整理了。。。

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/