当前位置: 首页 > 编程笔记 >

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

柳修平
2023-03-14
本文向大家介绍jquery控制页面的展开和隐藏实现方法(推荐),包括了jquery控制页面的展开和隐藏实现方法(推荐)的使用技巧和注意事项,需要的朋友参考一下

【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控制页面的展开和隐藏实现方法(推荐)全部内容了,希望大家多多支持小牛知识库~

 类似资料:
  • 本文向大家介绍jQuery焦点控制图层展示延迟隐藏的方法,包括了jQuery焦点控制图层展示延迟隐藏的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery焦点控制图层展示延迟隐藏的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 本文向大家介绍Android编程实现Listview点击展开和隐藏的方法,包括了Android编程实现Listview点击展开和隐藏的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Android编程实现Listview点击展开和隐藏的方法。分享给大家供大家参考,具体如下: 代码较多,所以找关键点大家贴出来,相信大家看了之后很容易就明白的, 在listview的activity中 在自

  • 本文向大家介绍jQuery控制TR显示隐藏的几种方法,包括了jQuery控制TR显示隐藏的几种方法的使用技巧和注意事项,需要的朋友参考一下 网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: 那么控制显隐可以直接使用 第二种方法,是使用$.each(),这个方法需要设置table的id,如下: 那么控制显隐可以

  • 本文向大家介绍jQuery控制元素隐藏和显示,包括了jQuery控制元素隐藏和显示的使用技巧和注意事项,需要的朋友参考一下 1、jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: 2、jQuery淡入淡出效果 通过 jQuery,您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法: fadeIn()

  • 本文向大家介绍jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果,包括了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考,具体如下: 这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在“上一页”“下一页”上,立即浮现出所对应的图

  • 本文向大家介绍jQuery实现动态控制页面元素的方法分析,包括了jQuery实现动态控制页面元素的方法分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现动态控制页面元素的方法。分享给大家供大家参考,具体如下: 背景 最近做了一个小系统,其中需要在页面对用户的好友进行增删改查。本来没有那么复杂,用表格形式就可以相对容易的实现。 但是考虑到用户的体验度,首先添加尽量不想用输入