无为清净楼资源网 Design By www.qnjia.com
最近由于项目需要一个简单的多级下拉菜单菜单但是由于业务和样式上的要求,为了简洁,在网上找了很多导航菜单控件都不大适合,所以突发奇想自己写个吧~该动手就动手啊~
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的写法,其实还可以继续封成一个控件~
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的写法,其实还可以继续封成一个控件~
标签:
导航,菜单
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年09月30日
2024年09月30日
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】