jquery写的一个OutlookBar类，动态创建导航条
初学jquery，如有错误，请高手们指出
想看效果及完整代码的可以下载rar包
下载地址：https://files.cnblogs.com/songye/menu.rar
OutlookBar.js
1 function OutlookBar(targetName)//targetName:右侧iframe的name
2 {
3 //创建标题
4 this.AddTitle=function(menuid,menutitle,openor){
5 $("body").append("<div id="+menuid+" class='menu_down' ><span>"+menutitle+"</span></div><div id=child_"+menuid+" class='menuChild'></div><div class='jiange'></div>");
6 if(openor==false)
7 {
8 $("#child_"+menuid).hide();
9 $("#"+menuid).removeClass("menu_down");
10 $("#"+menuid).addClass("menu_up");
11 }
12 $("#"+menuid).click(function(){
13 if(openor==false){
14 $("#child_"+menuid).slideDown("fast");
15 $("#"+menuid).removeClass("menu_up");
16 $("#"+menuid).addClass("menu_down");
17 openor=true;
18 }
19 else
20 {
21 $("#child_"+menuid).slideUp("fast");
22 $("#"+menuid).removeClass("menu_down");
23 $("#"+menuid).addClass("menu_up");
24 openor=false;
25 }
26 })
27 }
28 //创建子项
29 this.AddItem=function(menuid,menuchildtext,childurl){
30 $("#child_"+menuid).append("<li><a target='"+targetName+"' href='"+childurl+"'>"+menuchildtext+"</a></li>");
31 }
32 }
使用创建导航条
<script type="text/javascript">
$(function(){
var cc=new OutlookBar('BoardList');//targetName:右侧iframe的name
cc.AddTitle('a','搜索引擎',true);//ID名，显示名，是否打开状态
cc.AddItem('a','百度','http://baidu.com');
cc.AddItem('a','google','http://google.com');
cc.AddTitle('b','门户网站',false);
cc.AddItem('b','QQ','http://QQ.com');
cc.AddItem('b','网易','http://163.com');
$("div").addClass("divwidth");
});
</script>
