配合php数组+javascript怎么完成一个JS可伸缩菜单?

JavaScript015

配合php数组+javascript怎么完成一个JS可伸缩菜单?,第1张

<html>

<head>

<title>TreeView菜单</title>

<link   rel="stylesheet"   type="text/css"   href="style.css">

</head>

<body   style="margin:0   padding:0">

<div   id="root"   style="position:relative   left:2   top:+15">

<font   id="out01e"   class="open"   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font>

<a   id="out01a"   href="JavaScript:"   class="open"   style="cursor:hand">   系统</a>

<div   id="out01edetails"   style="display:noneposition:relativeleft:0top:0"   >

&nbsp

<font   id="out0101e"   class="open"   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font>

<a   id="out0101a"   href="JavaScript:"   class="open"   style="cursor:hand">   定单管理</a>

<br>

<div   id="out0101edetails"   style="display:none   position:relativeleft:0">

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="Order/autoindent.asp"   target="frmMain">   建议定单管理</a>

<br>

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="#"   target="frmMain">   定单管理</a>

<br>

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="#"   target="frmMain">   门店定单管理</a>

<br>

</div>

&nbsp

<font   id="out0102e"   class="open"   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font>

<a   id="out0102a"   href="JavaScript:"   class="open"   style="cursor:hand">   库存管理</a>

<br>

<div   id="out0102edetails"   style="display:none   position:relativeleft:0">

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="Stock/stockquery.asp"   target="frmMain">   库存数据查询</a>

<br>

</div>

&nbsp

<font   id="out0103e"   class="open"   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font>

<a   id="out0103a"   href="JavaScript:"   class="open"   style="cursor:hand">   销售管理</a>

<br>

<div   id="out0103edetails"   style="display:none   position:relativeleft:0">

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="Sales/categquery.asp"   target="frmMain">   大类销售数据查询</a>

<br>

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="Sales/salesquery.asp"   target="frmMain">   销售数据查询</a>

<br>

</div>

&nbsp

<font   id="out0104e"   class="open"   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font>

<a   id="out0104a"   href="JavaScript:"   class="open"   style="cursor:hand">   中仓收货数据管理</a>

<br>

<div   id="out0104edetails"   style="display:none   position:relativeleft:0">

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="CenterReceiveOrder/orderquery.asp"   target="frmMain">   中仓收货数据查询</a>

<br>

</div>

</div>

</div>

<div   id="root"   style="position:relativeleft:2top:+15">

<span   width="18"   height="18"   border="0"><font   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font></span>

<a   href="#">

<span>返回主页</span>

</a>

</div>

<script   language="JavaScript">

<!--

function   clickHandler()   {

var   tid,   targetId,   srcElement,   targetElement

srcElement   =   window.event.srcElement

tid   =   srcElement.id

if   (srcElement.className   ==   "open")   {

tid   =   srcElement.id

tid   =   tid.substring(0,tid.length-1)   +   "e"

targetId   =   tid   +   "details"

targetElement   =   document.all(targetId)

if   (targetElement.style.display   ==   "none")   {

//to   expand

eval(tid   +   ".innerText   =   '1'")

targetElement.style.display   =   ""

}   else   {

eval(tid   +   ".innerText   =   '0'")

targetElement.style.display   =   "none"

}

}

}

document.onclick   =   clickHandler

-->

</script>

</body>

</html>

参考下面代码

<script type="text/javascript" src="jquery1.3.2.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#wenzhang>dd>dl>dd").hide()

$.each($("#wenzhang>dd>dl>dt"), function(){

$(this).click(function(){

$("#wenzhang>dd>dl>dd ").not($(this).next()).slideUp()

$(this).next().slideToggle(500)

//$(this).next().toggle()

})

})

})

</script>

<style type="text/css">

dl,dd,dt,ul,li{ margin:0padding:0list-style:nonecolor:#333}

#wenzhang{ width:300pxtext-align:centerfont-size:12pxborder-left:1px solid #dededeborder-right:1px solid #dededeborder-bottom:1px solid #dedede}

#wenzhang dd dl dt{ border-top:1px solid #dededebackground:#f2f2f2height:25pxline-height:25pxfont-weight:bold}

#wenzhang ul{ background:#f9f9f9}

#wenzhang li{ border-top:1px solid #efefefline-height:25px}

</style>

</head>

<body>

<dl id="wenzhang">

<dd>

<dl>

<dt>脚本下载</dt>

<dd>

<ul>

<li>ASP源码下载</li>

<li>PHP源码下载</li>

<li>ASP.net源码下载</li>

</ul>

</dd>

</dl>

</dd>

<dd>

<dl>

<dt>网页特效</dt>

<dd>

<ul>

<li>菜单导航</li>

<li>层和布局洋</li>

<li>表单及按钮</li>

</ul>

</dd>

</dl>

</dd>

<dd>

<dl>

<dt>最新更新</dt>

<dd>

<ul>

<li>最新更新</li>

<li>下载排行</li>

<li>推荐下载</li>

</ul>

</dd>

</dl>

</dd>

</dl>

<p>如果初次运行，请刷新一次页面，调用了本站的jQuery，可能加载需要些时间。</p>

</body>

this.SetNodes = function (n) {

var sClsName=n==0?this.ClassName0:this.ClassName1

for (i=0i<this.AllNodes.lengthi++ ) {

改成this.SetNodes = function (n) {

var sClsNamethis.ClassName0:this.ClassName1

for (i=0i<this.AllNodes.lengthi++ ) {