JQuery学习日志三(横向纵向菜单)

来源：互联网发布：广西财经学院网络编辑：程序博客网时间：2024/05/20 12:48

CSS代码如下：

ul, li {/*清除ul和li上默认的小圆点*/list-style: none;}ul {/*清除子菜单的缩进值*/padding: 0;margin: 0;}.main, .hmain {background-image: url(../images/title.gif);background-repeat: repeat-x;width: 120px;}li {background-color: #EEEEEE;}a {/*取消所有的下划线*/text-decoration: none;padding-left: 20px;display: block;display: inline-block;width: 100px;padding-top: 3px;padding-bottom: 3px;}.main a, .hmain a {color: white;background-image: url(../images/collapsed.gif);background-repeat: no-repeat;background-position: 3px center;}//使用.main li a 后，main下li中的a标签将覆盖 .main a上定义的样式.main li a, .hmain li a {color: black;background-image: none;}//小菜单默认不显示.main ul, .hmain ul {display: none;}.hmain {float: left;smargin-right: 1px;}

HTML代码如下：

<body><ul><li class="main"><a href="#" mce_href="#">菜单项1</a><ul><li><a href="#" mce_href="#">子菜单项11</a></li><li><a href="#" mce_href="#">子菜单项12</a></li></ul></li><li class="main"><a href="#" mce_href="#">菜单项2</a><ul><li><a href="#" mce_href="#">子菜单项21</a></li><li><a href="#" mce_href="#">子菜单项22</a></li></ul></li><li class="main"><a href="#" mce_href="#">菜单项3</a><ul><li><a href="#" mce_href="#">子菜单项31</a></li><li><a href="#" mce_href="#">子菜单项32</a></li></ul></li></ul><br /><br /><br />//上面的是纵向菜单，下面的是横向菜单<ul><li class="hmain"><a href="#" mce_href="#">菜单项1</a><ul><li><a href="#" mce_href="#">子菜单项11</a></li><li><a href="#" mce_href="#">子菜单项12</a></li></ul></li><li class="hmain"><a href="#" mce_href="#">菜单项2</a><ul><li><a href="#" mce_href="#">子菜单项21</a></li><li><a href="#" mce_href="#">子菜单项22</a></li></ul></li><li class="hmain"><a href="#" mce_href="#">菜单项3</a><ul><li><a href="#" mce_href="#">子菜单项31</a></li><li><a href="#" mce_href="#">子菜单项32</a></li></ul></li></ul></body>

JS代码如下：

$(document).ready(function(){//页面中的DOM已经装载完成时，执行的代码$(".main > a").click(function(){//找到主菜单项对应的子菜单项var ulNode = $(this).next("ul");/*if (ulNode.css("display") == "none") {ulNode.css("display","block");} else {ulNode.css("display","none");}*///ulNode.show("slow");//normal fast//ulNode.hide();//ulNode.toggle();////ulNode.slideDown("slow");//ulNode.slideUp;ulNode.slideToggle();changeIcon($(this));});$(".hmain").hover(function(){$(this).children("ul").slideDown();changeIcon($(this).children("a"));},function(){$(this).children("ul").slideUp();});});

1. 页面中的菜单项可以通过嵌套的ul和li来表示；

2. 菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单；

3. 浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进;

4. list-style属性值为none时，可以清除ul和li前面的小圆点;

5. 清除子菜单的缩进值，需要padding和margin都为0;

6. 可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，知道填满整个区域;

7. 可以使用bakcground-repeat来控制背景图的重复填充方式;

8. 如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的;

9. text-decoration属性值为none时，可以取消文字上的下划线;

10. background-position可以控制背景图的位置，属性值既可以用数值，也可以用center，left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向;

11. background-image的值为none表示没有背景图;

12. background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示;

13. IE6以外的其他浏览器可以通过设定display的值为block来让a元素充满所在的区域。对于IE6，则需要设定display为inline-block，同时设定a的宽度;

14. display的值为none可以用于隐藏元素;

15. .main a和.main > a的不同之处，前者选择使用了.main的这个class的元素内部所有的a节点，后者只选择.main的子节点中的a节点;

16. show,hide方法可以用于显示或隐藏元素，没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字，或者是’slow’,’normal’,’fast’这三个文字，都可以来控制完成显示或隐藏需要的时间。注意这时动画效果时靠不断改变元素的宽度和高度来实现的;

17. toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show，hide相同;

18. slideDown，slideUp可以实现向下或向上卷动的效果，实际上是通过指定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show，hide不同;

19. slideToggle和toggle达到的效果类似;

20. DOCTYPE对于JQuery中的动画是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果;

21. float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动;

22. 可以给多个选择器定义同样的样式，选择器之间用,分割。同样对于JQuery的$方法，也可以传入过个选择器

11.