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

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

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-LZ-淡入菜单-样式-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title 1-5-1/title style/* *清除内外边距**/body，h1，h2，h3，h4，h5，h6，hr，p，blockquote，/*结构元素结构元素*/dl、dt、dd、ul、ol、li、/*列出元素列表元素*/pre，/*文本格式元素文本格式元素*/form，fieldset，图例，按钮，输入，textarea，/*表单元素表单元素*/th，td /*表元素表格元素*/{ margin : 0；padd : 0；}正文，按钮，输入，选择，文本区域{ font : 12px/1.5 Tahoma，arial，\5b8b\4f53，无衬线；}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；} /* 小于12px的中文很难阅读，让小的正常化*/ul，ol { list-style : none；}/** 重置文本格式元素* */a { text-decoration :无；} a :悬停{文本装饰：下划线；}sup {竖排：文本-顶部；} /* 重置，减少对行高的影响*/sub {垂直对齐：文本-底部；}/** 重置表单元素* */图例{ color: # 000} /*对于ie6 */fieldset，img { border : 0；} /* img搭车：让链接里的img无边框*/按钮，输入，选择，文字面积{ font-size : 100%；} /* 使得表单元素在工程师协会下能继承字体大小*//* 注：optgroup无法扶正*//** 重置表格元素* */表格{边框-折叠：折叠；边框间距： 0;}/style style type=' text/CSS ' # menu { width :300 px；溢出：隐藏} #菜单dt {后台： # CCCcolor: # fffcursor :指针} # menu DD { background : # F4 F4；color: # fff显示： none } #菜单dt。悬停{ background : green }/style脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' dl ')).mouseover(函数(){ $(this)).儿童(' dt ').addClass(')悬停')。end().儿童(' dd ').show()；$(这个)。兄弟姐妹()。儿童(' dt ').removeClass(“”悬停')。end().end().兄弟姐妹()。儿童(' dd ').hide()；});});/script/head dydiv id=' menu ' dl dt第一章-认识jQuery/dt DDA href=' # ' 1.1-JavaScript和Java脚本语言库/a/dd dda href='#'1.2-加入jQuery/a/dd dda href='#'1.3-编写简单jQuery代码/a/dd dda href='#'1.4-jQuery对象和数字正射影像图对象/a/DD/dl/dt第2章-jQuery选择器/dt dda href='#'2.1-jQuery选择器是什么/a/dd dda href='#'2.2-jQuery选择器的优势/a/dd dda href='#'2.3-jQuery选择器/a/dd dda href='#'2.4-应用jQuery改写示例/a/DD/dl/dt第3章-jQuery中的数字正射影像图操作/dt dda href='#'3.1-DOM操作的分类/a/dd dda href='#'3.2-jQuery中的数字正射影像图操作/a/dd /dl/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。