哎,要好好学习哦!!
要点:由两个ul组成,理清楚每一个ul所代表的意义,
先把具体要实现的样式排出来,再相应的调用js
js中可以简单的理解为,当点击其中的某个span时,完成两个工作,其一给span的parent()【即span上面的li】添加“collapsed”类;其二,hide()与span成为silbings同胞级元素ul。
css样式如下:
<style>
*{ margin:0px; padding:0px;}
ul{ list-style:none;}
li{ line-height:22px;}
.tree{ margin:40px;}
/*第一个ul*/
.treelist li.expanded{ background:url(images/11.gif) no-repeat 0 3px; padding-left:15px; cursor:pointer;}
.treelist li.collapsed{ background:url(images/1.gif) no-repeat 0 3px; padding-left:15px; cursor:pointer;}
/*第2个ul*/
.treelist li.expanded ul li{ background:url(images/2.gif) no-repeat 0 0; padding-left:15px;}
</style>
js代码如下:
<script >
$(function(){
$(".treelist > li > span").click(function(){
var $ul = $(this).siblings("ul");
if($ul.is(":visible")){
$(this).parent().attr("class","collapsed");
$ul.hide();
}else{
$(this).parent().attr("class","expanded");
$ul.show();
}
return false;
});
});
</script>
Html代码如下:
<div class="tree">
<h3>产品分类</h3>
<ul class="treelist">
<li class="expanded">
<span>衬衫</span>
<ul>
<li><span>短袖衬衫</span></li>
<li><span>长袖衬衫</span></li>
</ul>
</li>
<li class="expanded">
<span>卫衣</span>
<ul>
<li><span>开襟卫衣</span></li>
<li><span>套头卫衣</span></li>
</ul>
</li>
<li class="expanded">
<span>裤子</span>
<ul>
<li><span>休闲裤</span></li>
<li><span>免烫卡其裤</span></li>
<li><span>牛仔裤</span></li>
<li><span>短裤</span></li>
</ul>
</li>
</ul>
</div>
分享到:
相关推荐
jquery经典树形导航菜单有好几种
ajax,jquery 左侧树形导航效果,带有特效
jquery树形滑动导航,亲测可用,DirectoryTree插件
jQuery文件树形结构菜单插件是一款利用数组导入文件树形菜单样式效果。 jQuery文件树形结构菜单插件截图
jQuery下拉框树形分类菜单选择代码是一款可以设置默认值的树形结构菜单选择功能,点击文本框下拉弹出树结构菜单选中赋值。
jquery tree树形结构在网页设计中必不可少,尤其是在后台管理模板(不兼容IE6,7,8浏览器)
jquery.tree.js树形导航菜单插件
DirectoryTree插件-jquery树形滑动导航
不同类型的树形菜单,导航菜单,折叠树形导航jquery 代码
左侧黑色树形导航菜单,bootstrap风格,简单大气,jquery开发,很好看的树形菜单框架,绝对值得下载,简单容易改造
搜集的两个jquery插件,用于生成树形导航分级菜单,其中一个还可以实现选择功能。
jquery树形导航菜单插件制作滑动多级二级下拉菜单,Checkbox 勾选操作 支持无限嵌套。
jquery树形导航菜单插件制作滑动多级二级下拉菜单展示
jquery分类树形菜单插件代码是一款SimpleTree插件实现的树形菜单特效代码。
jQuery多级折叠展开树形菜单代码是一款简单实用的树形结构菜单插件,数据封装在data.js里面,直接修改调用即可。
jQuery多级树形分类折叠菜单基于jquery-1.7.2.min.js制作,json树形菜单。
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框