點選標題實現內容元素伸展和收縮程式碼例項
本章節分享一段程式碼例項,它實現了點選標題內容元素伸展和收縮效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0; padding:0; } body{ font-size:13px; line-height:130%; padding:60px } #panel{ width:300px; border:1px solid #0050D0 } .head{ padding:5px; background:#96E555; cursor:pointer } .content{ padding:10px; text-indent:2em; border-top:1px solid #0050D0; display:block; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function(){ $("#panel h5.head").click(function(){ if($(this).next("div.content").is(":visible")){ $(this).next("div.content").slideUp(); }else{ $(this).next("div.content").slideDown(); } }) }) </script> </head> <body> <div id="panel"> <h5 class="head">螞蟻部落</h5> <div class="content">本站的url地址是softwhy.com</div> </div> </body> </html>
上面的程式碼實現了我們的要求效果,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(function(){}),文件結構完全載入完畢再去執行函式中的程式碼。
(2).$("#panel h5.head").click(function(){}),為標題元素註冊click事件處理函式。
(3).if($(this).next("div.content").is(":visible")),判斷下面的內容元素是否是顯示的。
(4).$(this).next("div.content").slideUp(),如果元素是顯示的,那麼就向上收縮元素。
(5).else{
$(this).next("div.content").slideDown();
},如果是隱藏的,那麼就下拉顯示元素。
二.相關閱讀:
(1).click事件可以參閱jQuery click事件一章節。
(2).next()方法可以參閱jQuery next()一章節。
(3).is()方法可以參閱jQuery is()一章節。
(4).slideUp()方法可以參閱jQuery slideUp()一章節。
(5).slideDown()方法可以參閱jQuery slideDown()一章節。
相關文章
- 點選側邊欄展開和收縮程式碼例項
- jquery實現的下拉和收縮程式碼例項jQuery
- javascript元素內容漸現效果程式碼例項JavaScript
- 點選實現隱藏元素本身程式碼例項
- javascript實現的清空表單元素內容程式碼例項JavaScript
- js禁止使用滑鼠選中元素內容程式碼例項JS
- jQuery點選文字框清除內容程式碼例項jQuery
- 點選實現元素的漸隱或者漸現程式碼例項
- 點選按鈕實現隱藏一個元素程式碼例項
- javascript獲取li元素內容程式碼例項JavaScript
- 點選實現選中指定元素的文字內容
- 點選標題可以展開效果程式碼例項
- jquery實現獲取outerHTML內容程式碼例項jQueryHTML
- 點選按鈕拷貝複製元素內文字程式碼例項
- js獲取偽元素選擇器規定的內容程式碼例項JS
- 點選元素實現動畫方式放大透明然後返回原貌程式碼例項動畫
- 實現文字框輸入內容提示程式碼例項
- 表格實現標題合併程式碼例項
- js獲取點選單元格中的內容程式碼例項JS
- 點選實現顯示密碼效果程式碼例項密碼
- js點選平滑定位到指定元素程式碼例項JS
- js實現的div元素尺寸彈性縮放效果程式碼例項JS
- jQuery table內容點選標題排序jQuery排序
- js點選div實現閃爍效果程式碼例項JS
- jQuery模擬實現滑鼠點選事件程式碼例項jQuery事件
- js檢測瀏覽器內容縮放效果程式碼例項JS瀏覽器
- Ctrl+Enter鍵實現提交表單內容例項程式碼
- 文字框輸入內容實現智慧提示效果程式碼例項
- 旋轉等待內容載入完畢實現程式碼例項
- 設定獲取div元素中的文字內容程式碼例項
- css上面縮圖底部標題佈局程式碼例項CSS
- 實現網頁標題跳動效果程式碼例項網頁
- js實現的元素運動程式碼例項JS
- js內容左右滑動切換的選項卡程式碼例項JS
- js實現的點選複製選中文字程式碼例項JS
- ajax實現的點選數目加1程式碼例項
- 點選回車實現表單提交效果程式碼例項
- 純css實現點選連結無效程式碼例項CSS