html：
<html lang="en">
<head>
<title>滑动显示</title>
<link href="css/xiaoxinxin.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- 代码begin -->
<div class="xiaoxinxin">
<p>点击开始查询</p>
<div class="myform">
<form method="get" action="" name="myform">
<input type="text" name="shuru"/>
<input type="submit">
</form>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$(function(){
//点击后判断div是否隐藏
$(".xiaoxinxin p").click(function(){
var ul = $(".myform");
if(ul.css("display")=="none"){
ul.slideDown(200);
}else{
ul.slideUp(200);
}
});
//再次点击隐藏div
$(".xiaoxinxin li").click(function(){
var txt = $(this).text();
$(".myform").hide();
});
});
</script>
<!-- 代码end -->
</body>
</html>css：
@charset "utf-8";
*{ margin:0; padding:0; list-style:none;}
body{ font-size:12px; text-align:left;}
.myform { display:none;}
.xiaoxinxin{width:150px; margin:20px auto; position:relative}
.xiaoxinxin p{width:144px; height:24px; line-height:24px; padding-left:4px; border:1px solid #ccc; color:#807a62; cursor:pointer}
.xiaoxinxin ul{width:148px; margin-top:2px; border:1px solid #ccc; position:absolute; }
.xiaoxinxin ul li{height:24px; line-height:24px; padding-left:10px; cursor:pointer;}
.xiaoxinxin ul li:hover{ background:#ccc; color:#fff;}
扫一扫
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
