非常实用的垂直折叠菜单（Accordion Menu）

By Rainbow on // jQuery // 9268 Views+ // (0) Comments

非常实用的垂直折叠菜单，也叫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/

分享到： 更多

文章评论 已经有 0 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计