目录
二级菜单的收缩和展开
手动轮播图
HTML：
<div class="global_module procatalog"> <h3>产品分类</h3> <ul class="m-treeview"> <li class="m-expanded" id="me1"> <span>衬衫</span> <ul> <li><span>短袖衬衫</span></li> <li><span>长袖衬衫</span></li> </ul> </li> <li class="m-expanded" id="me2"> <span>卫衣</span> <ul> <li><span>开襟卫衣</span></li> <li><span>套头卫衣</span></li> </ul> </li> <li class="m-expanded" id="me3"> <span>裤子</span> <ul> <li><span>休闲裤</span></li> <li><span>免烫卡其裤</span></li> <li><span>牛仔裤</span></li> <li><span>短裤</span></li> </ul> </li> </ul> <p class="module_up_down" id="zs2"><img src="images/down.gif" alt="" /></p> </div>CSS：
.procatalog .m-treeview{ background:#FFFFFF; } .procatalog .m-treeview li span { cursor: pointer; } .procatalog .m-treeview li.m-expanded { padding-left:16px; background:url('../images/treeview-expanded.gif') no-repeat 0 0; } .procatalog .m-treeview li.m-expanded ul li { list-style-image: url('../images/treeview-item.gif'); } .procatalog .m-treeview li.m-collapsed { padding-left:16px; background:url('../images/treeview-collapsed.gif') no-repeat 0 0; } .procatalog .m-treeview li.m-collapsed ul{ display:none; }Jquery：
/*class简单版的左下二级菜单的收缩与展开*/ $(function () { $(".m-treeview li").click(function () { /*获取当前的class*/ var imgcss = $(this).attr("class"); /*判断class的名字 如果class的名字是m-expanded，就重新赋值换称m-collapsed。(反之亦然)*/ if (imgcss == "m-expanded") { /*重新赋值方法1*/ $(this).attr("class", "m-collapsed"); /*重新赋值方法2 $("#me1").addClass("m-collapsed").removeClass("m-expanded");*/ } else { /*重新赋值方法1*/ $(this).attr("class", "m-expanded"); /*重新赋值方法2 $("#me1").addClass("m-expanded").removeClass("m-collapsed");*/ } }) })
html:
<div class="content_right"> <div class="ad"> <ul class="slider"> <li><img src="images/ads/1.gif" /></li> <li><img src="images/ads/2.gif" /></li> <li><img src="images/ads/3.gif" /></li> <li><img src="images/ads/4.gif" /></li> <li><img src="images/ads/5.gif" /></li> </ul> <ul class="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div>css：
.content_right .ad { margin-bottom:10px; width:586px; height:150px; overflow:hidden; position:relative; } .content_right .slider,.content_right .num{ position:absolute; } .content_right .slider li{ list-style:none; display:inline; } .content_right .slider img{ width:586px; height:150px; display:block; } .content_right .num{ right:5px; bottom:5px; } .content_right .num li{ float: left; color: #FF7300; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #FF7300; background-color: #fff; } /*鼠标移动到数字上的样式*/ .content_right .num li.on{ color: #fff; line-height: 21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #FF7300; font-weight: bold; }Jquery：
手动轮播图 $(function () { $(".num li").bind("click mouseover", function () { var index = $(this).index(); $(".slider").animate({ "top":-(150)*index+"px" }) //添加鼠标移动到数字上的class $(this).addClass("on").siblings().removeClass("on"); }) })
