菜鸟用onload实现“只展开当前节点下级目录”的asp树形菜单

最新推荐文章于 2024-09-10 11:28:05 发布

原创最新推荐文章于 2024-09-10 11:28:05 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#asp #产品 #class #function #javascript #sql

本文介绍了一种在ASP中实现树形菜单的方法，通过样式控制和JavaScript触发展示当前选中大类下的子类，实现菜单的动态展开和收起。

首先声明，我不懂ASP，充其量只会改而已，各位高手拍砖手下留情。因为要实现一个如下面需求的左侧树形菜单：

产品1
产品2
产品3

当点击“产品1”时，页面跳转到产品1类目下的所有产品列表页面，左侧树形菜单自动显示当前大类“产品1”下的小类，此时只有“产品1”下级目录是展开的，其他大类节点都是闭合的，显示如下：

产品1
产品1-1
产品1-2
产品2
产品3

我在优快云论坛也看到了有搞ASP的朋友问类似这个问题，但似乎没人解决（可能高手懒的回答），正好手头有个树形菜单的源码，决定对其进行改造。

基本思路是：一次读出所有的大类及其小类，然后用样式控制所有小类不显示，之后再利用传递过来的大类变量，触发符合条件的小类菜单显示出来。OK，开工！

假设菜单页为left.asp，产品页为product.asp

left.asp源码如下：

sql="select * from class1 order by Class1Id asc" '读出大类

set sortRootRs=conn.execute (sql)

i=0

do while not (sortRootRs.eof or err)

sortRootRsID=sortRootRs("class1id")

<tr>

<a href="products.asp?class1id=<%=sortRootRs("class1id")%>"><span class="style6"> <%=sortRootRs("class1name")%></span></a>'显示大类列表

</div></td>

</tr>

<tr id=child<%=sortRootRsID%> style='display:none'>'小类列表用样式控制它默认不显示

sql="select * from class2 where class1ID="&sortRootRs("class1id")&" order by Class2Id asc" '读出小类

set sortChildRs=server.createObject("adodb.recordset")

sortChildRs.open sql,conn,1,1

j=1

'k=sortchildRs.recordcount

do while not (sortChildRs.eof or err)

<a href="products.asp?class1id=<%=sortRootRs("class1id")%>&class2id=<%=sortChildRs("class2id")%>" class="style7" style="text-decoration:none "><%=sortChildRs("class2name")%></a>

</div>

<%j=j+1

'if j>100 then exit do

sortChildRs.moveNext

loop%>'小类循环

</td>

</tr>

i=i+1

if i>100 then exit do

sortRootRs.moveNext

loop

%> '大类循环

</table>

这里要注意的就是这段：

<tr id=child<%=sortRootRsID%> style='display:none'>

小类列表的循环表格有一个id，并且要用样式默认它不显示。

然后就是product.asp，为了简单，我就不写出产品的列表部分，只把该页调用left.asp相关的语句写出来：

<!--

function window_onload(i){

childSort=document.all("child" + i);

//theTd=document.all("td" + i);

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

// theTd.bgcolor="#ffffff";

childSort.style.display="";}

else{

// theTd.bgcolor="#000000";

childSort.style.display="none";}

}

//-->

</script>

<html>

</body>

</html>

这里的function因为要被动触发，我上网找了好久才找到用window_onload的方法在进入页面的时候就可以触发（原始代码是使用onclick事件来触发打开下级目录，从而实现点击大类节点即展开其下级目录，同时可展开多个下级目录，但这和我们要实现的效果不符。我就是从这里想到的，不使用主动触发的方式，根据传递到页面的大类变量来被动触发，不就可以实现只打开当前大类节点的下级目录了么）

效果如下：