jQuery教學-記憶型滑動式展開選單,換頁重整選單不收合

梅問題-jQuery教學-記憶效果滑動式選單
  一直以來有不少朋友,遇到這樣子的狀況,當透過jQuery製作出來的,滑動式展開選單,點選了其中的大項後,選單會自動展開,並且切到該類別的頁面外,但這時就會發現到,選單立即就回到原始的縮合狀態,其實這並不是jQuery的問題,而是瀏覽器動態變數的生命週期機制,因此若想要讓選單不收合時,就得透過cookie小餅乾,來將變數暫存在使用者的電腦中,這時就可完成換頁選單可繼續保留,原先所點選的設定值了,至於怎麼作現在就一塊來看看吧!

使用的素材:
1.jquery.js
2.jquery.cookie.js

CSS樣式:
放在<head>.....</head>之間:
#menu {
	width: 155px;
	background-color: #bce0de;
}
#menu dt {
	cursor: pointer;
}
#menu dd, #menu  ul {
	margin: 0;
	padding: 0;
}
#menu ul li {
	list-style: none;
}
#menu ul li a {
	text-decoration: none;
	color: #660;
}
#menu ul li a:hover {
	text-decoration: underline;
}

Javascript:
放在<head>.....</head>之間:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script>
$(function(){
	var _menu_id = $.cookie('menu_id');	
	$("#menu dt").click(function(){		
		//將選單索引值寫入cookie
		var _index = $("#menu dt").index(this);		
		$.cookie("menu_id", _index);		
		
		var _this = $(this);
		var _ans = $(this).next();
		
		if(_ans.is(":visible")){
			_ans.slideUp();
		}else{
			$("#menu dd").slideUp();
			_ans.slideDown();
		}
	}).next().slideUp();
	
	//當cookie值不等於空時,就展開選單
	if($.cookie("menu_id")!=null){
		$("#menu dd").eq(_menu_id).slideDown();	
	}
	
	//清除cookie
	$("#c-cookie").click(function(){	
		$.cookie("menu_id", null);
	});
	
});
</script>

HTML:
放在<body>.....</body>之間:
<dl id="menu">
<dt>選單一</dt>
    <dd>
        <ul>
            <li><a href="#">次選單一</a></li>
        </ul>
    </dd>
 
<dt>選單二</dt>
    <dd>
        <ul>
            <li><a href="#">次選單一</a></li>
            <li><a href="#">次選單二</a></li>
            <li><a href="#">次選單三</a></li>
        </ul>
    </dd>	
    
 <dt>選單三</dt>
    <dd>
        <ul>
            <li><a href="#">次選單一</a></li>
            <li><a href="#">次選單二</a></li>
            <li><a href="#">次選單三</a></li>
        </ul>
    </dd>
</dl>

結果預覽:
梅問題-jQuery教學-記憶效果滑動式選單

當點了選單後,網頁已更換選單也不會縮回去,甚至重新整理頁面也是。
梅問題-jQuery教學-記憶效果滑動式選單

即便重整頁面,選單也會正常的開啟剛所點選的項目。
梅問題-jQuery教學-記憶效果滑動式選單
[範例預覽] [範例下載]

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    chyuanyiin 說道:

    梅老師請教一下這個範例檔案怎下載? 謝謝提供

    回應:
    點一下,進入後 下方可選擇下載的主機載點
  • 第1梅
    syuan 說道:

    可以教學一下下面這網址的jQuery要怎麼套入嗎?
    我試了很多次都沒有成功
    我是新手又不知道自己哪裡有做錯

    http://ilikecss.com/blog/background-image-navigation/

    回應:
    檢查看看是否忘了把jquery載入了