jQuery滑動伸縮導航改善你的側邊欄

Leeiio — Sat, 29 Nov 2008 13:20:39 +0000

你是否覺得你的Wordpress的側邊欄過長，你是否覺得有些欄目不需要直接就顯示出來，或者你純粹的出於覺得想要個酷一點的側邊欄，這些都有助於你網站給訪問者友好得視覺體驗。當然，想要達到那樣的目的方法有很多種，如果你的側邊欄夠寬，你可以讓他以Tab方式切換，當然，因為我的側邊欄沒有那麼寬，那樣顯示的話可能不好看，於是我選擇了伸縮類型的效果。需要懂javascript吧？不好意思，本人目前還不懂javascript。那咋辦？涼拌～其實，不懂javascript依舊可以寫出javascript的效果。那個小朋友等不及要說出來了。沒錯，就是jQuery，本人也是今天才開始學習jQuery的，之前對此是七竅通了六竅。關於jQuery還不知道是啥的，我推薦你們還是google之吧。想要入門學習jQuey的，推薦先看看這個。

下面切入正題，先看看這段代碼:

$(document).ready(function(){
	$(".title").click(function(){
		$(".content").slideToggle("slow");$(this).toggleClass("off")
	});
});

很簡單的一段代碼，功能也能簡單。實現的原理就是當鼠標點擊樣式為.title的元素後，對樣式為.content的元素進行伸或縮的操作，並且改變原來被點擊的元素的樣式，這樣的用戶感受度就不錯了，可以讓用戶對哪些是可以點擊伸縮的元素一目了然。

下面的是一個sample的完整代碼


<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，多謝捧場！～

Leeiio Chaos Made. » 伸縮導航

jQuery滑動伸縮導航改善你的側邊欄