你是否覺得你的Wordpress的側邊欄過長，你是否覺得有些欄目不需要直接就顯示出來，或者你純粹的出於覺得想要個酷一點的側邊欄，這些都有助於你網站給訪問者友好得視覺體驗。當然，想要達到那樣的目的方法有很多種，如果你的側邊欄夠寬，你可以讓他以Tab方式切換，當然，因為我的側邊欄沒有那麼寬，那樣顯示的話可能不好看，於是我選擇了伸縮類型的效果。需要懂javascript吧？不好意思，本人目前還不懂javascript。那咋辦？涼拌～其實，不懂javascript依舊可以寫出javascript的效果。那個小朋友等不及要說出來了。沒錯，就是jQuery，本人也是今天才開始學習jQuery的，之前對此是七竅通了六竅。關於jQuery還不知道是啥的，我推薦你們還是google之吧。想要入門學習jQuey的，推薦先看看這個。
下面切入正題，先看看這段代碼:
1 2 3 4 5 | $(document).ready(function(){ $(".title").click(function(){ $(".content").slideToggle("slow");$(this).toggleClass("off") }); }); |
很簡單的一段代碼，功能也能簡單。實現的原理就是當鼠標點擊樣式為.title的元素後，對樣式為.content的元素進行伸或縮的操作，並且改變原來被點擊的元素的樣式，這樣的用戶感受度就不錯了，可以讓用戶對哪些是可以點擊伸縮的元素一目了然。
下面的是一個sample的完整代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>伸縮導航</title> <style type="text/css"> body{background:#000} div,h2{padding:0px;margin:0} .title{width:180px;background:#ccc;height:20px;line-height: 20px; font-size:12px;text-align:center;} .off {background:#777;color:#fff} .content{width:170px;height:300px;font-size:12px;background:#fff;padding:5px;} </style> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".title").click(function(){$(".content").slideToggle("slow");$(this).toggleClass("off")}); }); </script> </head> <body> <h2 class="title">我是一个可点击标题</h2> <div class="content"> 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。<br /> <strong>返回值:</strong>jQuery<br /> <strong>参数:</strong><br /> speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (Function) : (可选) 在动画完成时执行的函数 </div> </body> </html>
代碼很簡單，本人的處子jQuery，多謝捧場！～
Pingback: jQuery滑动伸缩导航改善侧边栏 | Note:ongakuer