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,多謝捧場!~

  • 实在…最近发现你这里加了好多东西…譬如欢迎的内容…

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

  • 晕,这么弄不是有多少要折叠的就要写多少次。。。
    each(function 就好了。

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

  • http://ishawn.net/tips/jquery-folded-menu-without-plugins.html
    这里应该有你需要的,演示页面的代码都可以直接看到。

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

  • Lin

    Leeiio 你好

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

    Lin

  • @Lin
    你好,可否提供贵站地址?我来根据贵站的侧边栏可以帮您写一个基于jquery的侧边栏伸缩的代码的。

  • Lin

    Leeiio 你好

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

  • 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;}

  • Lin

    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文件~

  • Lin

    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”)})});
    })

  • Lin

    <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”)})});
    })

  • Leeiio

    添加后应该是
    <script type=”text/javascript”>
    $(document).ready(function() {
    $(”.widget_text h4″).each(function(){$(this).click(function(){$(this).next().slideToggle(’slow’);$(this).toggleClass(”off”)})});
    })
    </script>
    </body>

    实在不行的话你可以把你的主题档案发我一份我修改后传回给你。

  • Lin

    Leeiio 你好

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

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

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

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

  • 过来拜读了,可惜看的不是很懂。我也想要你博客侧边栏的效果,在只支持js脚本的blogger.com上该怎么做呢?

    能否写个教程?另外提个额外的请求,这种滑动能否让图片式的按钮也有效果呢?

  • 我说的效果是指newest comments 和tags三个按钮的做法哈~~

  • @小天
    只要可以修改页面的源代码就可以实现,至于点击的对象是图片还是别的什么的这些都是可以的。

  • 详细说说怎么改吧~~ 😛

  • Pingback: jQuery滑动伸缩导航改善侧边栏 | Note:ongakuer()