jQuery学习记录----可收缩的菜单及局部刷新（五）

此篇旨在简单介绍一下如何实现菜单的伸缩，作为一种思路可以参考。做出来的菜单很丑陋，没有美化。望见谅。

一般的菜单可以用列表来做。初始时将一级菜单显示出来，二级菜单隐藏。鼠标点击哪个一级菜单，取到该菜单下的二级菜单，用jQuery很容易实现，如var as = $('ul>a');取到ul节点下的文字链接，再由此链接(as)取它的兄弟结点即为<li>标签。如

as.click(function (){
		var aNode = $(this);
		var lis = aNode.nextAll('li');
//		lis.toggle('fast');
		lis.toggle();//切换元素的可见状态
	});

 利用函数nextAll即可取得兄弟结点。

最后借助函数toggle()切换li元素的可见状态即可。

 

最后此篇介绍一下除用iframe实现局部刷新的另外一种方式：

例如用户点击二级菜单，想在页面上显示二级菜单所链接的页面。此种需求，可以在二级菜单的链接上定义一个属性，其值为要链接的地址（不可在href上定义）。然后利用jQuery的load（）函数加载此属性值对应的页面即可。如

$('li > a').click(function (){
		$('#content').load($(this).attr('id'));
	});

 

此篇的详细代码在附件中。