本文实例讲述了jQuery实现左侧导航模块的显示与隐藏效果。分享给大家供大家参考,具体如下:
1.效果如图所示:
2.HTML代码:
产品分类
- 衬衫
- 短袖衬衫
- 长袖衬衫
3.jQuery代码:
元素上一个节点正是需要隐藏的,可以使用$(".module_up_down").prev()方法来获取
元素的 上一个同辈节点,然后使用slideToggle()动画方法来使元素向上收缩或向下展开 */ $(function(){ $(".module_up_down").toggle(function(){ var $self = $(this); $self.prev().slideToggle(600,function(){ $("img",$self).attr("src","images/up.gif"); }); },function(){ var $self = $(this); $self.prev().slideToggle(600,"images/down.gif"); }); }) })
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《用法总结》
希望本文所述对大家jQuery程序设计有所帮助。