jQuery教學-記憶型滑動式展開選單,換頁重整選單不收合
2013/12/17
使用的素材:
1.jquery.js
2.jquery.cookie.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>
結果預覽:

當點了選單後,網頁已更換選單也不會縮回去,甚至重新整理頁面也是。

即便重整頁面,選單也會正常的開啟剛所點選的項目。

[範例預覽] [範例下載]
引用網址:※如有發現掉圖或檔案無法下載,請由回應區留言告知,將會盡速處理!謝謝。
※本站採用CC授權請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處,謝謝。
※本站採用CC授權請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處,謝謝。
相關文章
回應本篇
※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。
梅老師請教一下這個範例檔案怎下載? 謝謝提供
點一下,進入後 下方可選擇下載的主機載點
可以教學一下下面這網址的jQuery要怎麼套入嗎?
我試了很多次都沒有成功
我是新手又不知道自己哪裡有做錯
http://ilikecss.com/blog/background-image-navigation/
檢查看看是否忘了把jquery載入了