jQuery采用连缀写法实现的折叠菜单效果

本文实例讲述了jQuery采用连缀写法实现的折叠菜单效果。分享给大家供大家参考。具体如下：

这是一款jQuery采用连缀写法实现的折叠菜单效果，作者是位高手啊，自己用jQuery的连缀写法编写的，差不多是手风琴菜单，功能是实现了，不过有点担心效率，作者希望与高人一起交流进步。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-lz-fade-in-menu-style-codes/

具体代码如下：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, 
dl, dt, dd, ul, ol, li, 
pre, 
form, fieldset, legend, button, input, textarea, 
th, td  {
 margin: 0;
 padding: 0;
}
body,button, input, select, textarea {
 font: 12px/1.5 tahoma, arial, 5b8b4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } 
code, kbd, pre, samp { font-family: courier new, courier, monospace; } 
small { font-size: 12px; } 
ul, ol { list-style: none; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: text-top; } 
sub { vertical-align: text-bottom; }

legend { color: #000; } 
fieldset, img { border: 0; } 
button, input, select, textarea { font-size: 100%; } 


table { border-collapse: collapse; border-spacing: 0; }


#menu{width:300px;overflow:hidden}
#menu dt{background:#ccc;color:#fff;cursor:pointer}
#menu dd{background:#f4f4f4;color:#fff;;display:none}
#menu dt.hover{background:green}






 

  
第1章-认识jQuery
  
1.1-Javascript和Javascript库
  
1.2-加入jQuery
  
1.3-编写简单jQuery代码
  
1.4-jQuery对象和DOM对象
 
 

  
第2章-jQuery选择器
  
2.1-jQuery选择器是什么
  
2.2-jQuery选择器的优势
  
2.3-jQuery选择器
  
2.4-应用jQuery改写示例
 
 

  
第3章-jQuery中的DOM操作
  
3.1-DOM操作的分类
  
3.2-jQuery中的DOM操作
 

希望本文所述对大家的jQuery程序设计有所帮助。