漂亮的jQuery下拉菜单学习


jQuery下拉菜单特效效果图
jquery下拉菜单
jQuery下拉菜单特效代码解读

$(document).ready(function(){
 
	$("ul.subnav").parent().append("<span></span>"); 
 
	$("ul.topnav li span").click(function() { //触发了这些样式表的元素,开始触发点击效果
 
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //点击下拉的时候,下拉速度快
 
		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); //离开的时候慢慢的收回
		});
 
		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			$(this).addClass("subhover"); //增加样式表名字On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //移除样式表名字On hover out, remove class "subhover"
	});
 
});

学习心得
1.jQuery使用parent.find可以寻找到这个元素下的孩子。
2.slideUp表示上浮,slideDown表示下降

效果预览

如果你是一名技术人员可加我QQ 2651-0442-02,如果你是java技术人还可以加入QQ群 1784-9136-0
你将得到的不仅仅是技术的交流,还有职业机会,人生解惑.
首发地址:月小升博客http://java-er.com/blog/jquery-droplist/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
此条目发表在 WEB前端 分类目录,贴了 , , 标签。将固定链接加入收藏夹。
既然来了,就评论一下,不会怀孕的

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">