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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
jQuery 性能优化指南 (1)
May 21 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
微信小程序开发的基本流程步骤
Jan 31 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小偷的核心程序
2007/04/09 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
php中define用法实例
2015/07/30 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
python发送HTTP请求的方法小结
2015/07/08 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python中os包的用法
2020/06/01 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
论文指导教师评语
2014/04/28 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2015年教师节活动总结
2015/03/20 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技