點選標題可以展開效果程式碼例項
分享一段簡單的程式碼例項,它實現了點選標題展開內容的效果。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #wrap { width: 600px; height: 600px; border: 1px solid #ccc; margin: 0 auto; } .list_wrap { width: 100%; height: 40px; font-weight: normal; border-bottom: 1px solid #beceeb; overflow: hidden; transition: all 1s ease-out; } .list_wrap h2 { width: 100%; height: 40px; line-height: 40px; cursor: pointer; margin: 0; background: rgb( 202,219,235); position: relative; text-indent: 50px; } .list_wrap h2 span { display: block; width: 0; height: 0px; border-width: 10px; overflow: hidden; border-style: solid; border-color: transparent transparent transparent #000; position: absolute; left: 20px; top: 10px; } .list_wrap p { display: block; width: 100%; color: #333; padding: 10px; box-sizing: border-box; } .active { height: 520px; } .active h2 { background: rgb( 0,219,235); } .active h2 span { border-color: #000 transparent transparent transparent; left: 10px; top: 20px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script> $(function () { $(".list_wrap").click(function () { $(this).addClass("active").siblings().removeClass("active"); }); }); </script> </head> <body> <div id="wrap"> <div class="list_wrap"> <h2><span></span>div css教程</h2> <p></p> </div> <div class="list_wrap"> <h2><span></span>javascript教程</h2> <p></p> </div> <div class="list_wrap"> <h2><span></span>json教程</h2> <p></p> </div> </div> </body> </html>
相關文章
- 點選可以展開和關閉的搜尋框程式碼例項
- jQuery點選展開收起程式碼例項jQuery
- JavaScript點選投票效果程式碼例項JavaScript
- jQuery點選滑出層效果程式碼例項jQuery
- 點選左右箭頭可以移動選項例項程式碼
- 點選側邊欄展開和收縮程式碼例項
- 點選實現顯示密碼效果程式碼例項密碼
- zepto點選檢視密碼明文效果程式碼例項密碼
- jQuery標題自動頂貼效果程式碼例項jQuery
- 網頁title標題滾動效果程式碼例項網頁
- jQuery tab選項卡效果程式碼例項jQuery
- 阻止點選回車提交表單效果程式碼例項
- js點選div實現閃爍效果程式碼例項JS
- js點選文字框選中文字效果程式碼例項JS
- 實現網頁標題跳動效果程式碼例項網頁
- JavaScript多級選項卡效果程式碼例項JavaScript
- 點選回車實現表單提交效果程式碼例項
- js點選按鈕數字加1效果程式碼例項JS
- 點選標題實現內容元素伸展和收縮程式碼例項
- css中間標題兩端橫線效果程式碼例項CSS
- js左右滑動選項卡效果程式碼例項JS
- jquery實現的選項卡效果例項程式碼jQuery
- canvas實現點選產生放射性效果程式碼例項Canvas
- 點選獲取焦點可以伸縮的搜尋框程式碼例項
- select下拉選單項互換效果程式碼例項
- jQuery選項卡切換圖片效果程式碼例項jQuery
- js實現的垂直選項卡效果程式碼例項JS
- 點選標題下拉展開二級子標題導航選單
- css進行中打點效果程式碼例項CSS
- 可以拖動立方體3D效果程式碼例項3D
- 滑鼠虛滑過選項卡切換效果程式碼例項
- js實現的可以通用的選項卡程式碼例項JS
- select下拉選單級聯效果例項程式碼
- 點選返回上一頁程式碼例項
- 點選連結不跳轉例項程式碼
- jQuery點選回車事件程式碼例項jQuery事件
- 點選刪除表格行程式碼例項行程
- jquery實現的點選進行倒數計時效果程式碼例項jQuery