你是否覺得你的Wordpress的側邊欄過長，你是否覺得有些欄目不需要直接就顯示出來，或者你純粹的出於覺得想要個酷一點的側邊欄，這些都有助於你網站給訪問者友好得視覺體驗。當然，想要達到那樣的目的方法有很多種，如果你的側邊欄夠寬，你可以讓他以Tab方式切換，當然，因為我的側邊欄沒有那麼寬，那樣顯示的話可能不好看，於是我選擇了伸縮類型的效果。需要懂javascript吧？不好意思，本人目前還不懂javascript。那咋辦？涼拌～其實，不懂javascript依舊可以寫出javascript的效果。那個小朋友等不及要說出來了。沒錯，就是jQuery，本人也是今天才開始學習jQuery的，之前對此是七竅通了六竅。關於jQuery還不知道是啥的，我推薦你們還是google之吧。想要入門學習jQuey的，推薦先看看這個。
实在…最近发现你这里加了好多东西…譬如欢迎的内容…
@Yacca:好歹目前在阿里幹的也算是用戶體驗。
晕，这么弄不是有多少要折叠的就要写多少次。。。
each(function 就好了。
@Shawn:呃，我是新手，不是很明白。
http://ishawn.net/tips/jquery-folded-menu-without-plugins.html
这里应该有你需要的，演示页面的代码都可以直接看到。
@Shawn:多謝，以及文中的不足之處也多謝提點，已更改措辭。
Leeiio 你好
因為我的側邊欄必須放許多文字欄位，因此變的很長不方便閱讀，經由搜尋找到你這裡，發現這功能就是我需求的，我不懂jQuery，也不懂程式，不知你是否可以將此外掛(插件)寄一分給我呢？謝謝~
Lin
@Lin
你好，可否提供贵站地址？我来根据贵站的侧边栏可以帮您写一个基于jquery的侧边栏伸缩的代码的。
Leeiio 你好
網址附上了，麻煩您了~我是要將側邊欄的地區縣市預設是縮起來的，只留下標題，然後有人點選標題再打開它 🙂
@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;}
Leeiio 你好
.textwidget{display:none;} 這是個加入 style.css 對吧！
但我不明白這段代碼該加入哪個檔案？
$(document).ready(function() {
$(”.widget_text h4″).each(function(){$(this).click(function(){$(this).next().slideToggle(’slow’);$(this).toggleClass(”off”)})});
})
@Lin
footer.php文件~
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”)})});
})
<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”)})});
})
添加后应该是
<script type=”text/javascript”>
$(document).ready(function() {
$(”.widget_text h4″).each(function(){$(this).click(function(){$(this).next().slideToggle(’slow’);$(this).toggleClass(”off”)})});
})
</script>
</body>
实在不行的话你可以把你的主题档案发我一份我修改后传回给你。
Leeiio 你好
代碼的部份有照你說的，不過這裡我無法貼出全部代碼，所以上面的留言才不完全
主題已經寄至 guaniu 這個gmail信箱，請您修改成功後務必告訴我修改的代碼，不然以後主題更新還得再麻煩你就不好了。
另外你有幫忙設計LOGO嗎？(我看了你的簡介，知道你會美工)我的網站剛成立還沒有LOGO，當然我願意支付酬勞的，可以的話等我想名稱再聯繫你。
以上麻煩您費心了，謝謝~
过来拜读了，可惜看的不是很懂。我也想要你博客侧边栏的效果，在只支持js脚本的blogger.com上该怎么做呢？
能否写个教程？另外提个额外的请求，这种滑动能否让图片式的按钮也有效果呢？
我说的效果是指newest comments 和tags三个按钮的做法哈～～
@小天
只要可以修改页面的源代码就可以实现，至于点击的对象是图片还是别的什么的这些都是可以的。
详细说说怎么改吧～～ 😛
Pingback: jQuery滑动伸缩导航改善侧边栏 | Note:ongakuer