jQuery點選展開收起程式碼例項
本章節分享一段程式碼例項,它實現了點選展開和收縮的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .line { width: 1000px; overflow: hidden; margin: 0 auto; background-color: #F7F5F5; border: 1px solid #e6e2e1; } .line .type { margin-top: 17px; text-indent: 27px; width: 12%; float: left; } .line .type_value { position: relative; float: left; background-color: #FFF; width: 88%; overflow: hidden; } .line .type_value ul { margin-right: 50px; } .line .type_value ul .collapse { max-height: 58px; overflow: hidden; } .line .type_value ul li { display: block; margin: 0 5px 8px 0; width: 180px; overflow: hidden; float: left; height: 22px; line-height: 22px; } .line .type_value ul li a { position: relative; color: #806F66; display: inline-block; padding: 1px 20px 1px 4px; line-height: 20px; height: 20px; white-space: nowrap; text-decoration: none; } .line .type_value ul li a:hover { color: #e4393c; } .line .type_value ul .none { display: none; } .line .type_value ul .block { display: block; } .line .type_value .option { position: absolute; right: 0; top: 17px; width: 105px; z-index: 1; } .line .type_value .option a { text-decoration: none; color: #806F66; } .line .type_value .option a:hover { color: #e4393c; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { $('.option a').click(function () { if ($(this).text() == '更多') { $(this).text("收起"); $('.collapse').find('.none').addClass('block'); } else { $(this).text("更多"); $('.collapse').find('.block').removeClass('block').addClass('none'); } }); }); </script> </head> <body> <div class="line"> <div class="type">相關型別</div> <div class="type_value"> <ul class="collapse"> <li><a href="javascript:void(0)">不限</a></li> <li><a href="javascript:void(0)">螞蟻部落</a></li> <li><a href="javascript:void(0)">螞蟻部落</a></li> <li><a href="javascript:void(0)">螞蟻部落</a></li> <li class="none"><a href="javascript:void(0)">螞蟻部落</a></li> <li class="none"><a href="javascript:void(0)">螞蟻部落</a></li> <li class="none"><a href="javascript:void(0)">螞蟻部落</a></li> <li class="none"><a href="javascript:void(0)">螞蟻部落</a></li> <li class="none"><a href="javascript:void(0)">螞蟻部落</a></li> <li class="none"><a href="javascript:void(0)">螞蟻部落</a></li> <li class="none"><a href="javascript:void(0)">螞蟻部落</a></li> </ul> <div class="option"><a href=" javascript:void(0)">更多</a></div> </div> </div> </body> </html>
相關文章
- 點選標題可以展開效果程式碼例項
- jQuery點選滑出層效果程式碼例項jQuery
- jQuery點選回車事件程式碼例項jQuery事件
- jQuery選項卡例項程式碼jQuery
- 點選側邊欄展開和收縮程式碼例項
- 文章點選展開和收起詳解
- jQuery點選文字框清除內容程式碼例項jQuery
- jQuery點選顯示彈出層例項程式碼jQuery
- jQuery tab選項卡效果程式碼例項jQuery
- jQuery垂直可摺疊展開導航選單程式碼例項詳解jQuery
- jQuery模擬實現滑鼠點選事件程式碼例項jQuery事件
- 點選可以展開和關閉的搜尋框程式碼例項
- iOS tableviewcell裡點選文字展開與收起功能iOSView
- jQuery 省市級聯選單程式碼例項jQuery
- jQuery is() 程式碼例項jQuery
- jQuery實現的tab選項卡程式碼例項jQuery
- jQuery設定select選中項程式碼例項jQuery
- jquery實現的選項卡效果例項程式碼jQuery
- 點選右則剪頭展開和收起頁面選單
- JavaScript點選投票效果程式碼例項JavaScript
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- jQuery選項卡切換圖片效果程式碼例項jQuery
- jQuery美化select下拉選單程式碼例項jQuery
- jQuery操作select下拉選單程式碼例項jQuery
- 點選左右箭頭可以移動選項例項程式碼
- jquery.idTabs實現的選項卡程式碼例項jQuery
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- 點選返回上一頁程式碼例項
- 點選連結不跳轉例項程式碼
- 點選刪除表格行程式碼例項行程
- jquery實現的點選進行倒數計時效果程式碼例項jQuery
- jQuery操作cookie程式碼例項jQueryCookie
- jQuery 動畫效果程式碼例項jQuery動畫
- jQuery事件冒泡程式碼例項jQuery事件
- jQuery實現的錨點平滑定位程式碼例項jQuery
- jQuery實現的禁用右鍵選單程式碼例項jQuery
- 使用jquery篩選和過濾陣列程式碼例項jQuery陣列
- jQuery類似電影院座位選取效果程式碼例項jQuery