左侧折叠式导航----JQ学习笔记一

------------HTML部份-------<body>
<div class="box"><ul class="menu"><li class="level1"><a href="#none">衬衫</a><ul class="level2"><li><a href="#none">短袖衬衫</a></li><li><a href="#none">长袖衬衫</a></li><li><a href="#none">短袖T恤</a></li><li><a href="#none">长袖T恤</a></li></ul></li><li class="level1"><a href="#none">卫衣</a><ul class="level2"><li><a href="#none">开襟卫衣</a></li><li><a href="#none">套头卫衣</a></li><li><a href="#none">运动卫衣</a></li><li><a href="#none">童装卫衣</a></li></ul></li><li class="level1"><a href="#none">裤子</a><ul class="level2"><li><a href="#none">短裤</a></li><li><a href="#none">休闲裤</a></li><li><a href="#none">牛仔裤</a></li><li><a href="#none">免烫卡其裤</a></li></ul></li></ul>
</div></body>

---------CSS-------

/* reset */
body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
input,select{font-size:12px;line-height:16px;}
img{border:0;}
ul,li{list-style-type:none;}
a {color:#00007F;text-decoration:none;}
a:hover {color:#bd0a01;text-decoration:underline;}.box {width: 150px;margin: 0 auto;
}
.menu{overflow:hidden;border-color: #C4D5DF;border-style: solid;border-width: 0 1px 1px;
}
/* lv1 */
.menu li.level1 a{display: block;height: 28px;line-height: 28px;background:#EBF3F8;font-weight:700;color: #5893B7;text-indent: 14px;border-top: 1px solid #C4D5DF;
}
.menu li.level1 a:hover{text-decoration:none;}
.menu li.level1 a.current{background:#B1D7EF;}
/* lv2 */
.menu li ul{overflow:hidden;}
.menu li ul.level2{display:none;}
.menu li ul.level2 li a{display: block;height: 28px;line-height: 28px;background:#ffffff;font-weight:400;color: #42556B;text-indent: 18px;border-top: 0px solid #ffffff;overflow: hidden;
}
.menu li ul.level2 li a:hover{color:#f60;
}

　　-----js------

<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){$(".level1 > a").click(function(){$(this).addClass("current")   //给当前元素添加"current"样式.next().slideDown()                //下一个元素显示.parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"样式.next().slideUp();                //它们的下一个元素隐藏return false;});
});
</script>

转载于:https://www.cnblogs.com/cangege/p/3239696.html

左侧折叠式导航----JQ学习笔记一相关推荐

Jq学习笔记（7）JQ动画
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你会 ...
HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
Windows phone 8 学习笔记(8) 定位地图导航
Windows phone 8 学习笔记(8) 定位地图导航原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控 ...
CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
【学习笔记】ROS-移动机器人导航相关
[学习笔记]ROS-移动机器人导航相关一.定位二.导航 1. move_base现存问题三.可视化 1. Rviz显示机器人运动轨迹方法: 一.定位二.导航 1. move_base现存问题 ...
《王道计算机组成原理》学习笔记和总目录导航
<王道计算机组成原理>学习笔记和总目录导读本篇文章是阅读和学习<王道计算机组成原理>后总结的理论知识笔记导航,专门用于遗忘后复习下面的文章是我在学习了<王道计算机组成 ...
Windows phone 8 学习笔记(8) 定位地图导航（转）
Windows phone 8 学习笔记(8) 定位地图导航(转) Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...
amazeui学习笔记--css（常用组件10）--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
ROS学习笔记之——移动机器人的导航
之前博客<ROS学习笔记之--激光雷达SLAM建图>已经介绍过如何通过激光雷达SLAM建图了,本博文讲一下ROS机器人的导航相关目录导航相关理论介绍导航的概述 costmap AMC ...

左侧折叠式导航----JQ学习笔记一

左侧折叠式导航----JQ学习笔记一相关推荐

最新文章

热门文章