只記錄使用者目前點擊的項目，不包含使用者點擊過哪些項目
參考資料：
jQuery教學-點選開啟下拉選單
前置作業：
使用JQuery-v1.6.4
Code：
<!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=utf-8" />
<title>記錄點擊li，重整後顯示點擊的li</title>
<script src="js/jquery.min.js" language="javascript"></script>
<script>
$(function(){
//cookie不等於0
if( document.cookie.length!=0 ){
var s_value=document.cookie.search('click_item=');//search字串搜尋,沒有找到為-1;
var e_value,str_CookTemp;
if( s_value!=-1 ){
s_value=s_value+('click_item='.length);
e_value=document.cookie.indexOf(';', s_value);
if( e_value==-1 ){
e_value=document.cookie.length;
}
str_CookTemp=document.cookie.slice(s_value,e_value);
//使用parents()可以取得DOM中的html元素;find搜索所有段落
var get_li=$('.menu ul:eq('+(str_CookTemp)+')').parents('li').find('a[href="#"]');
var str_title=get_li.html(); //取得title名稱
str_title=str_title.replace("►","▼");
get_li.html(str_title); //變更標題名稱
get_li.next().show();
}
}
$(".menu li a").click(function(){
var _this=$(this);
var on_li=$(this).closest('li'); //取得a上一層的li
var li_index=on_li.index(); //記錄li的index
document.cookie='click_item='+li_index+';'; //記錄點了哪一個li
if(_this.next("ul").length>0){
if(_this.next().is(":visible")){
//隱藏子選單並替換符號
_this.html(_this.html().replace("▼","►")).next().hide();
}else{
//開啟子選單並替換符號
_this.html(_this.html().replace("►","▼")).next().show();
}
//關閉連結
return false;
}
});
});
</script>
<style>
a{color:#333333; text-decoration:none; font-size:12px;}
a:hover{text-decoration:underline;}
ul{margin:0;padding:0;list-style-type: none;}
ul.submenu{display:none;}
ul.submenu{margin-left:25px;list-style-type:disc; color:#333333;}
</style>
</head>
<body>
<ul id="ulid" class="menu">
<li>
<a href="#">►abc公司</a>
<ul class="submenu">
<li><a href="http://localhost/" target="_blank">部門1</a></li>
<li><a href="http://localhost/" target="_blank">部門2</a></li>
</ul>
</li>
<li>
<a href="#">►def公司</a>
<ul class="submenu">
<li><a href="http://localhost/" target="_blank">部門1</a></li>
<li><a href="http://localhost/" target="_blank">部門2</a></li>
<li><a href="http://localhost/" target="_blank">部門3</a></li>
</ul>
</li>
<li>
<a href="#">►ghi公司</a>
<ul class="submenu">
<li><a href="http://localhost/" target="_blank">部門1</a></li>
<li><a href="http://localhost/" target="_blank">部門2</a></li>
<li><a href="http://localhost/" target="_blank">部門3</a></li>
<li><a href="http://localhost/" target="_blank">部門4</a></li>
</ul>
</li>
</ul>
</body>
</html>
沒有留言:
張貼留言