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

你是否覺得你的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，多謝捧場！～

  • Leeiio @ Sat @ November 29th, 2008
  • Skill | 技術
  • 5,872 Views

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

  1. Yacca says:
    2008年11月29日 at 11:58 pm

    實在…最近發現你這裡加了好多東西…譬如歡迎的內容…

    Reply
  2. Leeiio says:
    2008年11月30日 at 1:52 am

    @Yacca:好歹目前在阿里幹的也算是用戶體驗。

    Reply
  3. Shawn says:
    2008年12月02日 at 1:06 am

    暈，這麼弄不是有多少要摺疊的就要寫多少次。。。
    each(function 就好了。

    Reply
  4. Leeiio says:
    2008年12月02日 at 1:57 am

    @Shawn:呃，我是新手，不是很明白。

    Reply
  5. Shawn says:
    2008年12月02日 at 2:00 am

    http://ishawn.net/tips/jquery-folded-menu-without-plugins.html
    這裡應該有你需要的，演示頁面的代碼都可以直接看到。

    Reply
  6. Leeiio says:
    2008年12月02日 at 2:07 am

    @Shawn:多謝，以及文中的不足之處也多謝提點，已更改措辭。

    Reply
  7. Lin says:
    2009年07月20日 at 4:50 pm

    Leeiio 你好

    因為我的側邊欄必須放許多文字欄位，因此變的很長不方便閱讀，經由搜尋找到你這裡，發現這功能就是我需求的，我不懂jQuery，也不懂程式，不知你是否可以將此外掛(插件)寄一分給我呢？謝謝~

    Lin

    Reply
  8. Leeiio says:
    2009年07月20日 at 5:29 pm

    @Lin
    你好，可否提供貴站地址？我來根據貴站的側邊欄可以幫您寫一個基於jquery的側邊欄伸縮的代碼的。

    Reply
  9. Lin says:
    2009年07月20日 at 7:43 pm

    Leeiio 你好

    網址附上了，麻煩您了~我是要將側邊欄的地區縣市預設是縮起來的，只留下標題，然後有人點選標題再打開它 🙂

    Reply
  10. Leeiio says:
    2009年07月21日 at 4:48 pm

    @Lin
    把以下這段代碼添加到最後前面
    <script type=”text/javascript”>
    $(document).ready(function() {
    $(“.widget_text h4”).each(function(){$(this).click(function(){$(this).next().slideToggle(‘slow’);$(this).toggleClass(“off”)})});
    })
    </script>
    然後添加一條css：
    .textwidget{display:none;}

    Reply
  11. Lin says:
    2009年07月21日 at 5:36 pm

    Leeiio 你好

    .textwidget{display:none;} 這是個加入 style.css 對吧！

    但我不明白這段代碼該加入哪個檔案？

    $(document).ready(function() {
    $(」.widget_text h4″).each(function(){$(this).click(function(){$(this).next().slideToggle(』slow』);$(this).toggleClass(」off」)})});
    })

    Reply
  13. Lin says:
    2009年07月21日 at 6:07 pm

    Leeiio 你好

    我已經加入了，這是我footer.php文件代碼，我回前台查看是有縮起邊欄了，但是點選標題並沒有打開的動作，是我哪邊設錯了嗎？

    <a class="rsslink" rel="nofollow" href=""><a class="rsslink" rel="nofollow" href=""> · · WordPress
    © · · Magazine theme StudioPress

    $(document).ready(function() {
    $(」.widget_text h4″).each(function(){$(this).click(function(){$(this).next().slideToggle(』slow』);$(this).toggleClass(」off」)})});
    })

    Reply
  14. Lin says:
    2009年07月21日 at 6:10 pm

    <a class="rsslink" rel="nofollow" href=""><a class="rsslink" rel="nofollow" href=""> · · WordPress
    © · · Magazine theme StudioPress

    $(document).ready(function() {
    $(」.widget_text h4″).each(function(){$(this).click(function(){$(this).next().slideToggle(』slow』);$(this).toggleClass(」off」)})});
    })

    Reply
  15. Leeiio says:
    2009年07月22日 at 8:45 am

    添加後應該是
    <script type=」text/javascript」>
    $(document).ready(function() {
    $(」.widget_text h4″).each(function(){$(this).click(function(){$(this).next().slideToggle(』slow』);$(this).toggleClass(」off」)})});
    })
    </script>
    </body>

    實在不行的話你可以把你的主題檔案發我一份我修改後傳回給你。

    Reply
  16. Lin says:
    2009年07月23日 at 12:32 pm

    Leeiio 你好

    代碼的部份有照你說的，不過這裡我無法貼出全部代碼，所以上面的留言才不完全

    主題已經寄至 guaniu 這個gmail信箱，請您修改成功後務必告訴我修改的代碼，不然以後主題更新還得再麻煩你就不好了。

    另外你有幫忙設計LOGO嗎？(我看了你的簡介，知道你會美工)我的網站剛成立還沒有LOGO，當然我願意支付酬勞的，可以的話等我想名稱再聯繫你。

    以上麻煩您費心了，謝謝~ :mrgreen:

    Reply
  17. 小天 says:
    2009年08月23日 at 3:24 pm

    過來拜讀了，可惜看的不是很懂。我也想要你博客側邊欄的效果，在只支持js腳本的blogger.com上該怎麼做呢？

    能否寫個教程？另外提個額外的請求，這種滑動能否讓圖片式的按鈕也有效果呢？

    Reply
  18. 小天 says:
    2009年08月23日 at 3:27 pm

    我說的效果是指newest comments 和tags三個按鈕的做法哈～～

    Reply
  19. Leeiio says:
    2009年08月23日 at 11:22 pm

    @小天
    只要可以修改頁面的源代碼就可以實現，至於點擊的對象是圖片還是別的什麼的這些都是可以的。

    Reply
  20. 小天 says:
    2009年08月23日 at 11:36 pm

    詳細說說怎麼改吧～～ 😛

    Reply

  21. Pingback: jQuery滑動伸縮導航改善側邊欄 | Note:ongakuer

Leave a Reply

Your email address will not be published. Required fields are marked *