初学jquery,如有错误,请高手们指出
想看效果及完整代码的可以下载rar包
下载地址:http://files.cnblogs.com/songye/menu.rar
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 }
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 }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<
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>
$( 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>