jQuery之使用slideToggle实现垂直下拉菜单
jQuery
张鑫旭
1人收藏 214次学习

jQuery之使用slideToggle实现垂直下拉菜单

原文地址:jQuery之使用slideToggle实现垂直下拉菜单 

一、前面的唠叨

jQuery库确实是个很强大,可以让人偷懒的东西。过去许多只有在flash中才可以看到的效果,现在只要几行js代码+jQuery库就可以轻松实现。本实例就展示如何利用jQuery的slideToggle实现效果上佳的垂直下拉菜单效果

二、效果抢先

您可以狠狠地点击这里:demo实例页面

三、关于CSS

下拉菜单分为两个部分,一个是单击区域,也就是默认可见区域,您可以使用图片或其他形式的元素。我比较懒,怕作图,所以本实例可见区域就用CSS写了一下。

还有一个就是下拉列表区域了,一般而言,都是用无序列表ul li实现,当然,其实直接裸a标签(即<div><a href="#">a</a><a href="#">b</a><a href="#">c</a></div>)就可以实现效果了,但是,为了更好的利用语义化,多采用li列表形式(即ul > li > a)。默认情况下,下拉菜单列表区域是隐藏的,单击可见区域后会显示,出现下拉菜单。每个菜单的样式都不一样,且CSS不是本文重点,所以这里不对样式做详解了。

四、关于jQuery代码

jQuery代码分为三小段,见下面:

$(function(){
        //第一小段
	$(".v_menu_list li:odd").addClass("alt");

        //第二小段	
	$("#menuClick").click(function(){
		$("#vMenuList").slideToggle();	
		return false;
	});

        //第三小段
	$(".v_menu_list > li > a").hover(function(){
		$(this).animate({
			paddingLeft: 20				
		},100);									  
	},function(){
		$(this).animate({
			paddingLeft: 5				
		},50);	
	});
});

这三小段代码只有第二段是必须的,第一小段和第三小段都是为了增强表现表现效果添加的。这三小段的作用分别如下:


1、$(".v_menu_list li:odd").addClass("alt");是作用是实现斑马条纹,就是灰色白色的间隔。如下图:

li:odd是jQuery高级选择器,用以寻找页面范围内的奇数匹配项。

 

2、第二段中的$("#vMenuList").slideToggle();其实就是本文的全部,一个slideToggle即实现的菜单的自动下拉以收起。

slideToggle(speed,callback)意思是在任何隐藏的元素上执行slideDown(),同时在任何非隐藏的任何已包装的元素上执行slideUp()。也就是隐藏元素会显示同时向下滑,形成下拉效果,如果是非隐藏元素则滑上收起然后消失。

其有两个参数,一个是speed,表速度,数字或字符串关键字,如是数字,表毫秒,如字符串关键字,则有slow,normal和fast,默认是normal。另一个参数是callback,指回调函数,当下拉完毕或收起完毕时执行某函数。本实例没有回调操作,故省略。

所以$("#vMenuList").slideToggle();可以解释为id为vMenuList的元素如果是隐藏的则出现并下拉,如果当前是可见的,则收起并隐藏。

 

3、第三段是利用了animate函数自定义动画,让每个列表项中的a标签的padding-left值改变,当鼠标经过时渐增质20像素,鼠标移开回到原来的0像素。深入讲那可要比大话西游里的唐僧还要啰嗦,所以关于animate留到日后,还有hover的使用也是,且听下回分解:)。

 

 

 

 

五、相关下载

您可以狠狠地点击这里:精简源文件下载(.zip 16.8K)


如果只看文章,可能会云里雾里,表述不清。建议,先看demo,再看本文,在看源文件,就能很轻松的掌握了。
还是那句话,若有不足欢迎指正,不甚感谢!

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
jQuery