jquery动态下滑展示与折叠的下拉菜单特效,一句代码就能实现亲测 原创

文章标签: 菜单特效
  • :
  • 07-06 22:49
  • :
  • 162次
  • :
  • 0条
  • 2赞

简介用jquery制作动态下滑展开或折叠的菜单特效原理,及完整的在线实例演示。l

我们都见过网上那种点击后,缓缓下拉展开显示的子菜单的特效吧,其实这个效果用jquery来作,是非常简单的!下面这句就是核心的代码:

$("#ID").slideToggle();


slideToggle
:通过高度变化来切换所有匹配元素的可见性,它的语法结构如下:

slideToggle([speed],[easing],[fn]):

参数:
speed:速度,值为"slow","normal","fast" 或具体的毫秒数值,如:1000
easing:用来指定切换效果,默认是"swing",可用参数"linear",站长没用过这个。。。
fn:在动画完成时执行的函数,每个元素执行一次。


下面来看一个完整的实例:

HTML结构如下:

<div class="menu">菜单一<a href="#">显示</a></div>  
<ul class="list-unstyled">    
    <li>子菜单1.1</li>    
    <li>子菜单1.2</li>    
    <li>子菜单1.3</li>  
</ul>


JS代码如下:

$("div.menu a").on("click",function(){	
    var smenu=$(this).parent("div.menu").next("ul");  	
    smenu.slideToggle();
});

$(this).parent("div.menu").next("ul"); 这一句的意思是获取当前元素的div.menu父元素的同级下一个ul元素。

当然,我们也可以直接给ul赋上具体的ID,通过$("#ID")的方式来操作,这里只是为了多让大家熟悉一下jquery里操作元素标签的方法才这样写的,^_^!!!


下面是具体的在线实例演示:
jquery滑动折叠显示或隐藏菜单特效的在线演示



您正在找的文章可能是:
热点文章
热点图文
最近更新