最近在做前端页面改版,将以前的静态布局用bootstrap+自定义样式重构web页面。今日按jpg效果图重构了一个树目录菜单。架构思路不难,跟第一篇发的“非常简洁的仿js树形菜单”差不多,难在要在细节上处理好,时间有限,就是多选框那里处理不太好,可以自行再优化。效果向下兼容至IE8,以下分享源码:
CSS规则:
.wrapper{width: 300px; height: 400px; overflow-x: scroll;border: 1px solid #ccc;margin: 0 auto;}
.fold{ display:none;}
.aiui .checkbox{ width: 15px; height: 15px; border: 1px solid #dadada; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin:2px 5px 0 0;cursor: pointer; }
.aiui .c-selected{ border: 1px solid #27b0f2; position: relative;}
.aiui .c-selected:after{ content:''; display:block; width:100%; height:100%; position: absolute; left: 0; top: 0; background:#27b0f2 url("ai_icon.png") no-repeat -36px -1px; }
.aiui .c-selected:after{ background-position: -1px -1px;}
.aiui .checkbox > input{ margin: 0; visibility: hidden;}
.pull-left{ float: left;}
.c-f:after{content:".";display:block;height:0;clear:both;visibility:hidden}
ul,li,i{ list-style:none; padding:0; margin:0; font-style:normal;}
.ai-treenav{ width:100%;}
.ai-treenav ul{ margin-left:20px;}
.ai-treenav i{width:14px; height:14px; background:url("ai_icon.png") no-repeat -4px -33px; margin:2px 7px 0 0; float: left}
.ai-treenav i.unfold, .ai-treenav .item-name-last > i{width:14px; height:14px; background:url("ai_icon.png") no-repeat -24px -33px;}
.ai-treenav a{display:block; font-size:14px; height:22px; padding:3px 0; color:#666; overflow:hidden;}
.nav-trunk{ margin-left:20px;}
.ai-treenav .checkbox{ margin-top: 0;}
.ai-treenav .filename,.ai-treenav .filename-open{background: url("ai_icon.png") no-repeat 0 -72px; padding-left: 25px; width: 50%;white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.ai-treenav .filename-open{ background-position: 0 -52px;}
.ai-treenav li.unfold{min-width: 250px;}
.ai-treenav li.unfold > ul li .filename{ width: 60%;}
HTML源码
<div class="wrapper">
<div class="aiui">
<div class="ai-treenav">
<ul>
<li>
<ul class="nav-trunk">
<li ><a class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox c-selected"><input type="checkbox"></div></span><span class="pull-left filename">一级目录名称</span></a>
<ul class="nav-trunk fold ">
<li ><a class="item-name c-f" title="二级目录名称二级目录名称二级目录名称"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename" >二级目录名称好长好长好长呀</span></a>
<ul class="nav-trunk fold">
<li> <a class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">三级目录名称</span></a>
<ul class="nav-trunk fold" >
<li><a class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">四级目录名称</span></a>
<ul class="nav-trunk fold">
<li><a class="item-name item-name-last c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">五级目录名称</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li ><a class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">一级目录名称</span></a>
<ul class="nav-trunk fold ">
<li ><a class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">二级目录名称</span></a>
<ul class="nav-trunk fold">
<li> <a class="item-name item-name-last c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">三级目录名称</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li ><a class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">一级目录名称</span></a>
<ul class="nav-trunk fold ">
<li ><a class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">二级目录名称</span></a>
<ul class="nav-trunk fold">
<li> <a class="item-name item-name-last c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">三级目录名称</span></a>
</li>
<li> <a class="item-name item-name-last c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">三级目录名称</span></a>
</li>
<li> <a class="item-name item-name-last c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">三级目录名称</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
JS:
$(function () {
$(".item-name > i").click(function(){
$(this).parent().parent().toggleClass("unfold")
$(this).parent().parent().find("ul:first").slideToggle(500);
$(this).toggleClass("unfold");
$(this).parent().children(".filename").toggleClass("filename-open");
});
});
$(function () {
$(".checkbox").click(function (){
$(this).toggleClass("c-selected");
});
});
运行效果:
所用到的背影图片: