java多线程    Java入门    vsftp    ftp    linux配置    centos    FRP教程    HBase    Html5缓存    webp    zabbix    分布式    neo4j图数据库    

漂亮的jQuery下拉菜单学习

jQuery下拉菜单特效效果图
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表示下降

效果预览


This entry was posted in WEB前端 and tagged , , . Bookmark the permalink.
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址:月小升博客https://java-er.com/blog/jquery-droplist/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
您的评论是我写作的动力.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*