非常实用的垂直折叠菜单(Accordion Menu)

非常实用的垂直折叠菜单,也叫Accordion Menu.

本例子主要用到了jQuery的slideToggle(speed, callback), slideDown(speed,callback) 和 slideUp(speed,[callback])和函数。

slideToggle 是通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。

slideDown(speed,callback) 是通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。

slideUp 是通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。

slideToggle 这个东西实际上就是 slideDown slideUp 的集合体.
如果元素当前可见 则 滑动隐藏 如果当前元素已经隐藏则滑动显示。

既然我已经明白了核心的实现方法,那就看一看代码吧!

Accordion Menu Using jQuery Demo

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

下载:

http://blog.moocss.com/jQuery/demo15/

站点统计