首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery学习记要-可收缩的菜单及局部刷新(五)

2012-10-30 
jQuery学习记录----可收缩的菜单及局部刷新(五)此篇旨在简单介绍一下如何实现菜单的伸缩,作为一种思路可以

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'));});

?

此篇的详细代码在附件中。jQuery学习记要-可收缩的菜单及局部刷新(五)

热点排行