用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

toggle开关-用于内容的隐藏和展开功能(更多展示>>)

2015-10-15 作者: 云代码会员举报

[javascript]代码库

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索框</title>
<style type="text/css">
	*{margin:0;padding:0;}
	.search_warp{width:100%; margin:10px auto; border-bottom:2px solid #eee; padding-bottom:5px; font-family:"微软雅黑"; font-size:12px}
	.search_box{width:90%; margin:5px auto;}
	.search_box td{ height:30px;}
	.search_box1{width:90%; margin:5px auto; display:none;}
	.search_box1 td{ height:30px;}
	.input_none_60{width:60%; height:25px; line-height:25px; border:1px solid #dddedf;}
	.cl{clear:both;}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $(".search_box1").toggle();
  });
});
</script>
</head>

<body>
<div class="search_warp">
	<table border="0" cellpadding="0" cellspacing="0" class="search_box">
    	<tr>
        	<td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
        	<td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
        	<td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
        	<td>&nbsp;</td>
        </tr>
    	<tr>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td>&nbsp;</td>
        </tr>
    	<tr>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td><a href="#" id="hide">更多>></a></td>
        </tr>
    </table>
	<table border="0" cellpadding="0" cellspacing="0" class="search_box1">
    	<tr>
        	<td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
        	<td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
        	<td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
        	<td>&nbsp;</td>
        </tr>
    	<tr>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td>&nbsp;</td>
        </tr>
    	<tr>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td>工作人员识别号:<input class="input_none_60"></input></td>
        	<td>&nbsp;</td>
        </tr>
    </table>
</div>
</body>
</html>

[代码运行效果截图]


toggle开关-用于内容的隐藏和展开功能(更多展示>>)

[源代码打包下载]




网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...