非常实用的垂直折叠菜单(Accordion Menu)
非常实用的垂直折叠菜单,也叫Accordion Menu.
本例子主要用到了jQuery的slideToggle(speed, callback), slideDown(speed,callback) 和 slideUp(speed,[callback])和函数。
slideToggle 是通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。
slideDown(speed,callback) 是通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。
slideUp 是通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。
slideToggle 这个东西实际上就是 slideDown slideUp 的集合体.
如果元素当前可见 则 滑动隐藏 如果当前元素已经隐藏则滑动显示。
既然我已经明白了核心的实现方法,那就看一看代码吧!
JavaScript Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(document).ready(function() { //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked $("#firstpane p.menu_head").click(function() { $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"}); }); //slides the element with class "menu_body" when mouse is over the paragraph $("#secondpane p.menu_head").mouseover(function() { $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"}); }); }); |
演示:
http://blog.moocss.com/jQuery/demo15/accordion-menu/index.html
下载:
文章评论 已经有 0 条评论!