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 相关文章推荐
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
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 array_walk() 数组函数
2011/07/12 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
js 字符串转化成数字的代码
2011/06/29 Javascript
JS跨域总结
2012/08/30 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
vue.js项目打包上线的图文教程
2017/11/16 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
深入浅析Python的类
2018/06/22 Python
python实现爬山算法的思路详解
2019/04/09 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
使用Python构造hive insert语句说明
2020/06/06 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
《天游峰的扫路人》教学反思
2014/04/25 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
初三化学教学反思
2016/02/22 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
python 学习GCN图卷积神经网络
2022/05/11 Python
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL