漂亮的jQuery下拉菜单学习

发表于 2012-09-08 11:48:14 by 月小升

jQuery下拉菜单特效效果图

jQuery下拉菜单特效代码解读

$(document).ready(function(){

	$("ul.subnav").parent().append(""); 
	
	$("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表示下降

效果预览

---

首发地址：月小升博客 – https://java-er.com/blog/jquery-droplist/
无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢