jquery控制页面的展开和隐藏实现方法(推荐)


Posted in Javascript onOctober 15, 2016

【jquery代码】 

<script> 
      require(["jquery","validate","bootstrap","lhgcalendar"],function($) { 
        $(function(){   
          $("form").validate(); 
        }); 
    
        $(".up").click(function(){ 
          $(this).parent().parent().parent().parent().next().slideToggle("slow"); 
        }); 
       }); 
 </script>

【HTML代码】

<div class="panel panel-default"> 
<table class="table table-bordered"> 
  <thead> 
<tr class=" active" id="a3"> 
  <th width="15%" style="text-align:center;">加盟状态</th> 
  <th width="25%" style="text-align:center;">申请表名称</th> 
  <th width="25%" style="text-align:center;">审核情况</th> 
  <th width="25%" style="text-align:center;">操作</th> 
  <th width="10%" style="text-align:center;">隐藏/展开切换</th> 
</tr> 
  </thead> 
  <tbod> 
<tr style="text-align:center;" class=" active"> 
  <td><strong class="text-warning">第1步:<? echo $stage->name;?></strong></td> 
  <td><a href="#">《信息表》</a></td> 
  <td>-</td> 
  <td>-</td> 
  <td> 
<span class="up text-info" ><i class="glyphicon glyphicon-chevron-down"style="padding:0px 5px 0 5px;"></i></span> 
  </td> 
</tr> 
  </tbody> 
</table> 
<div class="panel-body" style="display:none;"> 
  <table class="table"> 
<tbody> 
  <tr> 
    <td>-</td>  
    <td>-</td><pre name="code" class="html">    <td>-</td>  
  </tr>  
</tbody>  
  </table> 
</div>  
</div>

以上就是小编为大家带来的jquery控制页面的展开和隐藏实现方法(推荐)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
Jquery ajax基础教程
Nov 20 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
JS常用函数和常用技巧小结
Oct 15 #Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 #Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 #Javascript
原生JS实现的放大镜效果实例代码
Oct 15 #Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 #Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 #Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 #Javascript
You might like
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
简单的自定义php模板引擎
2016/08/26 PHP
javascript各种复制代码收集
2008/09/20 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Python中的random()方法的使用介绍
2015/05/15 Python
python开发之list操作实例分析
2016/02/22 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
python检测IP地址变化并触发事件
2018/12/26 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
日语专业个人的求职信
2013/12/03 职场文书
初中学校军训方案
2014/05/09 职场文书
借款协议书
2014/09/16 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android