你是否觉得你的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