这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一个简单的多级下拉菜单菜单但是由于业务和样式上的要求,为了简洁找了好多都不适合于是自己写了一个,晒出来与大家分享,感兴趣的朋友可以参考下哈,希望可以帮助到你
最近由于项目需要一个简单的多级下拉菜单菜单但是由于业务和样式上的要求,为了简洁,在网上找了很多导航菜单控件都不大适合,所以突发奇想自己写个吧~ 该动手就动手啊~
HTML 部分
- <h2>
- SuperFish
- </h2>
- <ul class="nav" hid="root">
- <li>
- <a href="javascript:void(0)" testid="aa">
- 一级li 1
- </a>
- <ul>
- <li>
- <a href="javascript:void(0)" testid="bb">
- 二级 li 1
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="cc">
- 二级 li 2
- </a>
- <ul>
- <li>
- <a href="javascript:void(0)" testid="dd">
- 三级 li 1
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="ee">
- 三级 li 2
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="ff">
- 三级 li 3
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="gg">
- 三级 li 4
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="hh">
- 三级 li 5
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="ii">
- 三级 li 6
- </a>
- <ul>
- <li>
- <a href="javascript:void(0)" testid="jj">
- 四级 li 1
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="kk">
- 四级 li 2
- </a>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0)" testid="ll">
- 二级 li 3
- </a>
- <ul>
- <li>
- <a href="javascript:void(0)" testid="mm">
- 三级 li 6
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="nn">
- 三级 li 7
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="oo">
- 三级 li 8
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="pp">
- 三级 li 9
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="qq">
- 三级 li 10
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0)" testid="rr">
- 二级 li 4
- </a>
- <ul>
- <li>
- <a href="javascript:void(0)" testid="ss">
- 三级 li 11
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="tt">
- 三级 li 12
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="uu">
- 三级 li 13
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="vv">
- 三级 li 14
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" testid="ww">
- 三级 li 15
- </a>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0)" testid="xx">
- 一级li 2
- </a>
- <ul>
- <li>
- <a href="javascript:void(0)" testid="ss">
- 二级 li 11
- </a>
- </li>
- </ul>
- </li>
- </ul>
Javascript 部分
- <script language="javascript" type="text/javascript">
- var navigationBar = function () {
- //使用时将testid属性换成href属性即可
- var currentUrlHref = "jj";
- var root = $("ul[hid='root']");
- $(root).find(">li").attr("first_level", true);
- $(root).find(">li>a").addClass("nav_first_style");
- //递归向下查找可展开元素并且绑定toggle展开事件
- var searchChildren = function (root) {
- if (root.find(">li").length > 0) {
- $(root).addClass("ul_style");
- var liChildren = root.find(">li");
- $(liChildren).each(function (idx, item) {
- searchChildren($(item));
- })
- } else if (root.find(">ul").length > 0) {
- $(root).addClass("li_style");
- if ($(root).attr("first_level") != true.toString()) {
- $(root).find(">a").addClass("li_style_a");
- }
- var aLink = $(root).find(">a");
- //初始装载的时候判断当前url是不是和导航栏中的东西匹配
- if (currentUrlHref == $(aLink).attr("testid")) {
- findInitPosition(aLink);
- }
- $(aLink).toggle(function () {
- $(this).addClass("li_style_a_selected");
- $(this).parent().find(">ul").show("fast");
- //隐藏非一级节点下的所有兄弟元素
- if ($(this).parent().attr("first_level") != true.toString()) {
- $(this).parent().siblings().find(">a").removeClass("li_style_a_selected");
- $(this).parent().siblings().each(function (idx, item) {
- removeClassAndHide(item);
- })
- } else {
- $(this).addClass("nav_first_style_selected");
- $(this).removeClass("li_style_a_selected");
- $(this).parent().siblings().find(">a").removeClass("nav_first_style_selected");
- $(this).parent().siblings().each(function (idx, item) {
- removeClassAndHide(item);
- })
- }
- }, function () {
- if ($(this).parent().attr("first_level") == true.toString()) {
- $(this).addClass("nav_first_style_selected");
- $(this).parent().siblings().find(">a").removeClass("nav_first_style_selected");
- }
- removeClassAndHide($(this).parent());
- })
- var ulChildren = root.find(">ul");
- $(ulChildren).each(function (idx, item) {
- $(item).hide();
- searchChildren($(item));
- });
- } else {
- if ($(root).attr("first_level") != true.toString()) {
- $(root).find(">a").addClass("li_style_a");
- }
- $(root).addClass("li_style");
- $(root).click(function () {
- if ($(root).attr("first_level") != true.toString()) {
- $(this).find(">a").addClass("li_style_a_selected");
- $(this).siblings().find(">a").removeClass("li_style_a_selected");
- $(this).siblings().each(function (idx, item) {
- removeClassAndHide(item);
- addFirstLevelClass(item);
- })
- } else {
- $(this).find(">a").addClass("nav_first_style_selected");
- $(this).find(">a").removeClass("li_style_a_selected");
- $(this).siblings().find(">a").removeClass("nav_first_style_selected");
- removeClassAndHide(this);
- }
- })
- if (currentUrlHref == $(root).find(">a").attr("testid")) {
- findInitPosition($(root).find(">a"));
- }
- }
- }
- //递归查找初始位置
- var findInitPosition = function (aLink) {
- var currentLi = $(aLink).parent();
- if ($(currentLi).parent().parent().find(">a").length > 0) {
- findInitPosition($(currentLi).parent().parent().find(">a"));
- }
- if ($(currentLi).find(">ul").length > 0) {
- $(currentLi).find(">ul").show("fast");
- }
- if ($(currentLi).attr("first_level") != true.toString()) {
- $(currentLi).find(">a").addClass("li_style_a_selected");
- } else {
- $(currentLi).find(">a").addClass("nav_first_style_selected");
- }
- }
- //递归向下删除所有子节点的选中样式
- var removeClassAndHide = function (li) {
- if ($(li).attr("first_level") != true.toString()) {
- $(li).find(">a").removeClass("li_style_a_selected");
- $(li).find(">ul").hide("fast");
- if ($(li).find(">ul").length > 0) {
- $(li).find(">ul>li").each(function (idx, item) {
- removeClassAndHide(item);
- });
- }
- } else if ($(li).attr("first_level") == true.toString()) {
- $(li).find(">ul").hide("fast");
- $(li).find(">ul>li").each(function (idx, item) {
- removeClassAndHide(item);
- })
- } else {
- $(li).find(">ul").show("fast");
- $(li).find(">ul>li").each(function (idx, item) {
- removeClassAndHide(item);
- })
- }
- }
- //递归向上添加第一层节点样式
- var addFirstLevelClass = function (li) {
- if ($(li).attr("first_level") != true.toString()) {
- addFirstLevelClass($(li).parent().parent());
- } else {
- if (!$(li).find(">a").hasClass("nav_first_style_selected")) {
- $(li).find(">a").addClass("nav_first_style_selected");
- $(li).siblings().find(">a").removeClass("nav_first_style_selected");
- }
- }
- }
- //创建导航
- var createNav = function () {
- searchChildren(root);
- }
- createNav();
- }
- var initNav = new navigationBar();
- </script>
不过暂时还没有封装成类似 jquery 的写法,其实还可以继续封成一个控件~
来源: http://www.phperz.com/article/17/0628/280665.html