滑动显示文本框

来源：互联网发布：ps6软件下载编辑：程序博客网时间：2024/05/22 11:52

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;}

阅读全文

0 0