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'));});
?
此篇的详细代码在附件中。