JQ 隐藏和显示

iteye_17658

于 2016-03-30 09:49:22 发布

阅读量115

点赞数

分类专栏：阅-JQ2 文章标签： javascript ViewUI

阅-JQ2 专栏收录该内容

11 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏和显示</title>
<style>
*{ padding: 0; margin: 0;}
li{ list-style-type: none;}
body{ margin: 50px;}
a{ text-decoration: none; color:#f00;}
ul{ border:3px solid #abcdef; width: 200px; display: none;}
span{cursor: pointer;}
</style>
</head>
<body>
<span>更多</span>
<ul>
	<li><a href="#">列表一</a></li>
	<li><a href="#">列表二</a></li>
	<li><a href="#">列表三</a></li>
	<li><a href="#">列表四</a></li>
	<li><a href="#">列表五</a></li>
</ul>
<script src="jquery.js"></script>
<script>
$(function(){
	var oBtn = $('span');
	var oContent = $('ul');
	oBtn.click(function(){
		/*if(oContent.is(':visible')){
			oContent.slideUp();
		}else{
			oContent.slideDown();
		}*/
		oContent.slideToggle();
	});
});
</script>
</body>
</html>

效果图：