折叠式列表菜单模板设计

来源：互联网发布：c语言中char的用法编辑：程序博客网时间：2024/04/30 08:58

我们平时常接触到的软件功能基本上都会有各种各样的折叠树形菜单，有些放左边，有些放右边，默认收起来，点击展开列出菜单子项。为了便利开发，自行开发相关模板，日后拿来即用，如图效果：

贴上部分代码：

<div id="container_left"><!-- 这里生成树形菜单 --><div class="fold"><dl class="fold-food"><a href="javascript:void(0);" class="arrow-close">menu 1</a></dl><ul><li class="dotted"><a href="javascript:void(0);" title='1'>file1</a></li></ul><ul><li class="dotted"><a href="javascript:void(0);" title='2'>file2</a></li></ul><ul><li class="solid"><a href="javascript:void(0);" title='3'>file3</a></li></ul></div><div class="fold"><dl class="fold-food"><a href="javascript:void(0);" class="arrow-close">menu 2</a></dl><ul><li class="dotted"><a href="javascript:void(0);" title='4'>file4</a></li></ul><ul><li class="solid"><a href="javascript:void(0);" title='5'>file5</a></li></ul></div><div class="fold"><dl class="fold-food"><a href="javascript:void(0);" class="arrow-close">menu 3</a></dl><ul><li class="dotted"><a href="javascript:void(0);" title='6'>file6</a></li></ul><ul><li class="dotted"><a href="javascript:void(0);" title='7'>file7</a></li></ul><ul><li class="solid"><a href="javascript:void(0);" title='8'>file8</a></li></ul></div><div class="fold"><dl class="fold-food"><a href="javascript:void(0);" class="arrow-close">menu 4</a></dl><ul><li class="solid"><a href="javascript:void(0);" title='9'>file9</a></li></ul></div><div class="fold"><dl class="fold-food"><a href="javascript:void(0);" class="arrow-close">menu 5</a></dl><ul><li class="dotted"><a href="javascript:void(0);" title='10'>file10</a></li></ul><ul><li class="solid"><a href="javascript:void(0);" title='11'>file11</a></li></ul></div></div>

$(document).ready(function(){initfoodsize();$('.fold-food').click(function(){$fold = $(this).parent();$('.fold-food').removeClass('selected');$('.fold-food a').removeClass('arrow-open').addClass('arrow-close');$('ul', $('.fold').not($fold)).hide();if($('ul', $fold).css('display') == 'none'){$('ul', $fold).show();$(this).addClass('selected');$('a', this).removeClass('arrow-close').addClass('arrow-open');}else{$('ul', $fold).hide();}});$('.fold li a').click(function(){$('.fold li a.indexed').removeClass('indexed');$(this).addClass('indexed');// 这里做页面切换提交var id = $(this).attr('title');});});$(window).resize(function(){initfoodsize();});function initfoodsize(){$("#container_left").height($(window).height());}

#container_left{width: 200px;height: auto;border-right:#dddddd 1px solid;background-color: #f1f4f6;}#container_left .fold{width:100%;background-color:#fdf9d1;}#container_left .fold-food{width:100%;height:30px;line-height:30px;text-align:center;background:url(../img/fold-food.png) repeat-x;background-position: -30 0;border:#a9e0fb solid;border-width:0 0 1px 0;color:#666666;cursor:pointer;}#container_left .fold-food a{display: block;text-decoration: none;width:100%;height: 30px;line-height:30px;color: #333333;}#container_left .arrow-close, .arrow-open{background:url(../img/fold-food-arrow.png) no-repeat left;}#container_left .arrow-close{background-position: 0 0;}#container_left .arrow-open{background-position: 0 -30px;}#container_left .selected{/*font-weight: bold;*/font-size: 14px;}#container_left .fold ul{display:none;}#container_left .fold li{height:30px;line-height:30px;text-align:center;}#container_left .fold li.dotted{background:url(../img/dotted.png) repeat-x left bottom;}#container_left .fold li.solid{border-bottom:#a9e0fb 1px solid;}#container_left .fold li a{display: block;text-decoration: none;width:100%;height: 30px;line-height:30px;color: #333333;background: url(../img/file-icon.png) no-repeat;background-position: 15% 50%;}#container_left .fold li a.indexed{background-color: #fe9917;color: #ffffff;}

源代码下载地址：

https://github.com/cienaspx/foldleaf

0 0