求一个JS菜单

悬赏园豆：20 [已关闭问题]

求一个JS菜单，下面是要求
1:紧向的，比如
父菜单1
子菜单1-1
子菜单1-2
父菜单2
子菜单2-1
子菜单2-2
2:要求当前只能打开一项菜单，即点开2，1就会关闭（有个滑动郊果)
3:菜单要在多个页面用，要能保存打开状态，比如当前打开的是菜单2，连接到第二个页面也要打开的是菜单2

注：有个JQuery实现的菜单这些功能都有，就是保存菜单状态会保存不住或是保存错误，它是用cookie保存的，没办法解决！

网站开发 Javascript

AssionSoft | 初学一级 | 园豆：0
提问于：2009-02-10 13:40

< >

其他回答(1)

http://www.scriptlover.com/controls/context/　　

小媒体控股 | 园豆：325 (菜鸟二级) | 2009-02-10 14:28

我有一个也是记录Cookie的.

Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>title</title>
<style type="text/css">
body {
    margin:0px;
    color:#000;
    font:normal 12px Arial,Verdana,Tahoma;
    background:#fff0ff;
}
#tb  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 24px;
    color: #FFFFFF;
    text-decoration: none;
    height: 24px;
    width: 162px;
    padding-left: 15px;
}
#BB {
    width:177px;
    margin:0px;
    padding:0px;
    text-align:left;
    list-style:none;
}
#BB .item {
    filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr='#FFFFFF', endColorStr='#f0f0f0', gradientType='0');
    list-style:none;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #CCCCCC;
    border-left-color: #CCCCCC;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    width: 160px;
    margin: 0px;
}
#BB .item ul {
    margin:0;
    width:160px;
    padding:10px 0px 0px 15px;
    list-style:none;
    display:none;
}
#BB .item ul li {
    display:block;
    width:95%;
    font-size: 12px;
    color: #999999;
    text-decoration: none;
    line-height: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
}
#BB .item .bh a {
    font-size: 12px;
    color: #999999;
    text-decoration: none;
    margin-top: 5px;
}
#BB .item .bh a:hover {
    color: #F37021;
    text-decoration: underline;
}
#BB .item ul li a:link,a:visited {
    color:#999999;
    text-decoration:none
}
#BB .item ul li a:hover {text-decoration:underline}
#menu {
    width:177px;
    margin:0px;
    padding:0px;
    text-align:left;
    list-style:none;
}
#menu .item {
    list-style:none;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #CCCCCC;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: -1px;
    width: 162px;
}
a.title:link, a.title:visited, a.title:hover {
    display:block;
    color:#000;
    font-weight:normal;
    width:162px;
    line-height:25px;
    cursor:pointer;
    text-decoration:none;
    height: 25px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 15px;
    font-size: 12px;
}
#menu .item ul {
    margin:0;
    width:160px;
    padding:8px 0px 8px 15px;
    list-style:none;
    display:none;
    filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr='#FFFFFF', endColorStr='#f0f0f0', gradientType='0');
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #CCCCCC;
    border-left-color: #CCCCCC;
}
#menu .item ul li {
    display:block;
    width:95%;
    font-size: 12px;
    color: #999999;
    text-decoration: none;
    margin-top: 2px;
}
#menu .item ul li a:link,a:visited {
    color:#999999;
    text-decoration:none
}
#menu .item ul li a:hover {color: #F37021;text-decoration:underline;}
</style>

</head>
<body>
<ul id="menu">
<li class="item"><a href="javascript:void(0)" class="title" name="1">aa</a>
<ul id="opt_1" name="opt_1" class="optiton">
<li><a href="#" target="mainFrame">aa1</a>
<li><a href="#" target="mainFrame">aa2</a>
<li><a href="#" target="mainFrame">aa3</a>
</ul></li>

<li class="item"><a href="javascript:void(0)" class="title" name="2">bb</a>
<ul id="opt_2" name="opt_2" class="optiton">
<li><a href="#" target="mainFrame">bb1</a>
<li><a href="#" target="mainFrame">bb2</a>
<li><a href="#" target="mainFrame">bb3</a>
</ul></li>
</ul>
</body>
</html>
<script language="javascript" type="text/javascript">
// --- 获取ClassName
document.getElementsByClassName = function(cl) {
    var retnode = [];
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = this.getElementsByTagName('*');
    for (var j = 0; j < elem.length; j++) {
        var classes = elem[j].className;
        if (myclass.test(classes)) retnode.push(elem[j]);
    }
    return retnode;
}
// --- 隐藏所有
function HideAll() {
    var items = document.getElementsByClassName("optiton");
    for (var j=0; j<items.length; j++) {
        items[j].style.display = "none";
    }
}
// --- 设置cookie
function setCookie(sName,sValue,expireHours) {
    var cookieString = sName + "=" + escape(sValue);
    //;判断是否设置过期时间
    if (expireHours>0) {
         var date = new Date();
         date.setTime(date.getTime + expireHours * 3600 * 1000);
         cookieString = cookieString + "; expire=" + date.toGMTString();
    }
    document.cookie = cookieString;
} 
//--- 获取cookie
function getCookie(sName) {
  var aCookie = document.cookie.split("; ");
  for (var j=0; j < aCookie.length; j++){
  var aCrumb = aCookie[j].split("=");
  if (escape(sName) == aCrumb[0])
      return unescape(aCrumb[1]);
  }
  return null;
}
window.onload = function() {
    var show_item = "opt_1";
    if (getCookie("show_item") != null) {
         show_item= "opt_" + getCookie("show_item");
    }
    //alert(show_item);
    //IE Bug數組Bug,放置頁面最后.
    document.getElementById(show_item).style.display = "block";
    var items = document.getElementsByClassName("title");
    for (var j=0; j<items.length; j++) {
        items[j].onclick = function() {
            var o = document.getElementById("opt_" + this.name);
            if (o.style.display != "block") {
                HideAll();
                o.style.display = "block";
                setCookie("show_item",this.name);
            }
            else {
                o.style.display = "none";
            }
        }
    }
}
</script>

江湖工夫 | 园豆：110 (初学一级) | 2009-02-10 15:25

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

求一个JS菜单

欢迎，请先登录或者注册。