jquery动态控制列表的展示和收缩

2021-11-11 21:06:50 阅读：212 来源： 互联网

标签：jquery function padding 列表 iamgecss toggle 动态控制 0px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		<script>
		$(function(){
			$("#iamgecss").toggle(function(){
				$(".content").slideDown(200);
			},function(){
				$(".content").slideUp(400);
			});
		});
		</script>
		<style type="text/css">
			#iamgecss{position:relative;width:300px;padding: 0px;}
			#iamgecss ul{display: none;background:white;border:1px solid #ccc;width:300px;padding: 5px;margin: 0px;list-style: none;}
			#iamgecss ul li{padding: 5px 0px;border-bottom:1px dotted #ddd;text-align: left;}
		</style>
	</head>
	<body>
		<center>
		<div id="iamgecss">jquery的特点
			<ul class="content">
				<li >jquery是一个javascript库</li>
				<li >jquery极大地简化了javascript编程</li>
				<li >jquery很容易学习</li>
				<li >拥有ajax开发的丰富函数库</li>
				
			</ul>
		</div>
		</center>
	</body>
</html>

上面的toggle可以换成hover是一样的功能，只不过是鼠标移进和移出

标签：jquery,function,padding,列表,iamgecss,toggle,动态控制,0px
来源： https://blog.csdn.net/cdcdhj/article/details/121276133

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jquery动态控制列表的展示和收缩