jquery控制頁面的展開和隱藏實現(xiàn)方法(推薦)

更新時間：2016年10月15日 11:51:09 投稿：jingxian

下面小編就為大家?guī)硪黄猨query控制頁面的展開和隱藏實現(xiàn)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

【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;">加盟狀態(tài)</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>

以上就是小編為大家?guī)淼膉query控制頁面的展開和隱藏實現(xiàn)方法(推薦)全部內(nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

相關(guān)文章

jQuery實現(xiàn)的動態(tài)文字變化輸出效果示例【附演示與demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)的動態(tài)文字變化輸出效果,采用jquery.quoterotator.min.js插件實現(xiàn)了文字動態(tài)變換顯示的功能,并附帶演示與demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
JQuery替換DOM節(jié)點的方法
這篇文章主要介紹了JQuery替換DOM節(jié)點的方法,實例分析了jQuery中replaceWith()和replaceAll()方法的相關(guān)使用技巧與注意事項,需要的朋友可以參考下
2015-06-06
Jquery獲取復(fù)選框被選中值的簡單方法
這篇文章介紹了Jquery獲取復(fù)選框被選中值的簡單方法，有需要的朋友可以參考一下
2013-07-07
jQuery中RadioButtonList的功能及用法實例介紹
RadioButtonList的使用想必大家都有所解除，本文為以示例的方式為大家詳細介紹下其功能及用法，感興趣的朋友可以參考下
2013-08-08
JQUERY 設(shè)置SELECT選中項代碼
本篇文章主要是對JQUERY 設(shè)置SELECT選中項的代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
jquery實現(xiàn)的簡單輪播圖功能【適合新手】
這篇文章主要介紹了jquery實現(xiàn)的簡單輪播圖功能,涉及jQuery基于定時器的事件響應(yīng)與頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2018-08-08
常用jQuery選擇器匯總
元素選擇是一切操作的前提，jQuery中$()函數(shù)最強大最常用的功能之一就是使用選擇器選擇DOM元素。這里就匯總一些十分常用的jQuery選擇器。
2017-02-02
JavaScript前端頁面搜索功能案例【基于jQuery】
這篇文章主要介紹了JavaScript前端頁面搜索功能案例,結(jié)合完整實例形式詳細分析了基于jQuery實現(xiàn)的前端頁面表格搜索功能相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2019-07-07
jquery更改元素屬性attr()方法操作示例
這篇文章主要介紹了jquery更改元素屬性attr()方法,結(jié)合實例形式簡單分析了jquery更改元素屬性attr()方法基本功能、語法及相關(guān)使用技巧,需要的朋友可以參考下
2020-05-05
jQuery實現(xiàn)簡單飛機大戰(zhàn)
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單飛機大戰(zhàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07