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 硬盘序列号+其它硬件信息
Dec 23 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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
全国中波电台频率表
2020/03/11 无线电
php下获取客户端ip地址的函数
2010/03/15 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
JS判断是否长按某一键的方法
2016/03/02 Javascript
js实现文字滚动效果
2016/03/03 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
vue实现购物车的监听
2020/04/20 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
python搭建微信公众平台
2016/02/09 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
Delphi工程师笔试题
2013/09/21 面试题
学生励志演讲稿
2014/01/06 职场文书
团日活动策划书
2014/02/01 职场文书
人事部专员岗位职责
2014/03/04 职场文书
关于环保的活动方案
2014/08/25 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
物业保安辞职信
2015/05/12 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL