js导航菜单(自写)简单大方_基础知识

最近由于项目需要一个简单的多级下拉菜单菜单但是由于业务和样式上的要求,为了简洁,在网上找了很多导航菜单控件都不大适合,所以突发奇想自己写个吧~该动手就动手啊~
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的写法,其实还可以继续封成一个控件~

时间: 2024-09-24 21:44:49

js导航菜单(自写)简单大方_基础知识的相关文章

JS函数定义方式的区别介绍_基础知识

关于JS的函数定义方式有以下两种: (1)典型的函数声明 function slide(arguments){ //...code } (2)以函数表达式的形式定义函数 var slide = function(arguments){ //...code } 虽然上面两种方式逻辑上是等价的,但是还是有点小区别: 区别一:例一中的函数会在代码执行以前被加载到作用域中,而例二则是在代码执行到那一行的时候才会有定 义: 区别二:函数声明会给函数指定一个名字,而函数表达式则是创建一个匿名函数,然后将这个

JS获取各种宽度、高度的简单介绍_基础知识

有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系. JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 of

js基本算法:冒泡排序,二分查找的简单实例_基础知识

知识扩充: 时间复杂度:算法的时间复杂度是一个函数,描述了算法的运行时间.时间复杂度越低,效率越高. 自我理解:一个算法,运行了几次时间复杂度就为多少,如运行了n次,则时间复杂度为O(n). 1.冒泡排序 解析:1.比较相邻的两个元素,如果前一个比后一个大,则交换位置. 2.第一轮的时候最后一个元素应该是最大的一个. 3.按照步骤一的方法进行相邻两个元素的比较,这个时候由于最后一个元素已经是最大的了,所以最后一个元素不用比较. function sort(elements){ for(var i

JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型_基础知识

ECMAScript是一种动态类型的语言,构建于5种简单数据类型(Undefined.Null.Boolean.Number.String)和一种复杂数据类型(Object)的基础之上.这篇文章就来复习一下简单数据类型,我会尽量从编程实践的角度来描述,下面代码运行环境为FireFox 14.0.1. 简单数据类型 简单数据类型 取值 Undefined undefined(只有一个值) Null null(只有一个值) Boolean true|false(只有两个值) Number 数值 St

详解Node.js模块间共享数据库连接的方法_基础知识

这个标题本身就是一个命题,因为使用默认方式的情况下,一个 Node.js 应用里的各个模块都是共享的同一个数据库连接.但是如果姿势不对,可能会很丑陋,甚至可能会出错. 你可以忽略下面这部分,直接切入正题. 背景最近在做专业课程设计,题目是"机票预订管理系统".需求比较简单,就试着拿最近在学的 Node.js 来做了.本来还在调研用何种 Node.js 框架比较合适,看了几个框架之后发现这是杀鸡用牛刀,有看文档查资料的时间还不如直接动手写了.最后写完我会把代码放到 Github 上,欢迎

Javascript基础_嵌入图像的简单实现_基础知识

img元素允许我们在HTML文档里嵌入图像. 要嵌入一张图像需要使用src和alt属性,代码如下: <img src="../img/example/img-map.jpg" alt="Products Image" width="580" height="266" /> 显示效果: 1 在超链接里嵌入图像 img元素的一个常见用法是结合a元素创建一个基于图像的超链接,代码如下: <a href="

后缀就扩展名为js的文件是什么文件[原创]_基础知识

好多朋友刚开始接触网络,不懂后缀为js的文件,是什么文件,其实这个扩展名为.js的文件就是javascript文件,为什么要用<script src="test.js"></script>的格式来调用文件呢,其实我们经常在做网页过程中,因为js文件如果写到网页中,不利于我们的反复修改,如果以后我们需要修改js文件的话,就可以直接改js文件,不需要改整个网页,现在大家的网站都是生成静态的html,如果要修改成千上万的个静态页面,不论是替换还是从节约网站空间,都是不

JavaScript中几种排序算法的简单实现_基础知识

排序算法的实现 我的JS水平就是渣渣,所以我就用类似于JAVA和C的方式来写JavaScript的排序算法了. 而且这里我不讲算法原理,仅仅只是代码实现,可能会有Bug,欢迎大家博客评论指导.插入排序 插入排序(Insertion-Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in-place排序(即只需用到O(1)的额外空间的排序),因而在从后向前扫描过程中,需要反复把已排

使用Grunt.js管理你项目的应用说明_基础知识

Grunt.js是什么?Grunt.js是一个Javascript Task Runner(Javascript任务运行器),其基于NodeJS,可用于自动化构建.测试.生成文档的项目管理工具. Grunt.js并不是仅仅是构建工具,实际上他只是任务运行器,管理每个子任务的自动化运行,我们还能使用他做更多东西.  为什么使用Grunt.js?简单的说:为了自动化.对于前端项目,例如: •为了明确模块分工,我们可能会将Javascript代码拆成很小很小的一个个js文件,但是我们知道,在最终页面上