[JavaScript] toggle开关-用于内容的隐藏和展开功能(更多展示>>) →→→→→进入此内容的聊天室

来自 , 2020-10-14, 写在 JavaScript, 查看 166 次.
URL http://www.code666.cn/view/aa942ab2
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>搜索框</title>
  5. <style type="text/css">
  6.         *{margin:0;padding:0;}
  7.         .search_warp{width:100%; margin:10px auto; border-bottom:2px solid #eee; padding-bottom:5px; font-family:"微软雅黑"; font-size:12px}
  8.         .search_box{width:90%; margin:5px auto;}
  9.         .search_box td{ height:30px;}
  10.         .search_box1{width:90%; margin:5px auto; display:none;}
  11.         .search_box1 td{ height:30px;}
  12.         .input_none_60{width:60%; height:25px; line-height:25px; border:1px solid #dddedf;}
  13.         .cl{clear:both;}
  14. </style>
  15. <script src="js/jquery.min.js"></script>
  16. <script type="text/javascript">
  17. $(document).ready(function(){
  18.   $("#hide").click(function(){
  19.   $(".search_box1").toggle();
  20.   });
  21. });
  22. </script>
  23. </head>
  24.  
  25. <body>
  26. <div class="search_warp">
  27.         <table border="0" cellpadding="0" cellspacing="0" class="search_box">
  28.         <tr>
  29.                 <td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
  30.                 <td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
  31.                 <td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
  32.                 <td>&nbsp;</td>
  33.         </tr>
  34.         <tr>
  35.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  36.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  37.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  38.                 <td>&nbsp;</td>
  39.         </tr>
  40.         <tr>
  41.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  42.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  43.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  44.                 <td><a href="#" id="hide">更多>></a></td>
  45.         </tr>
  46.     </table>
  47.         <table border="0" cellpadding="0" cellspacing="0" class="search_box1">
  48.         <tr>
  49.                 <td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
  50.                 <td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
  51.                 <td width="30%">工作人员识别号:<input class="input_none_60"></input></td>
  52.                 <td>&nbsp;</td>
  53.         </tr>
  54.         <tr>
  55.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  56.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  57.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  58.                 <td>&nbsp;</td>
  59.         </tr>
  60.         <tr>
  61.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  62.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  63.                 <td>工作人员识别号:<input class="input_none_60"></input></td>
  64.                 <td>&nbsp;</td>
  65.         </tr>
  66.     </table>
  67. </div>
  68. </body>
  69. </html>
  70.  

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

这儿你可以回复上面这条便签

captcha