如何实现菜单的折叠和伸展？

zhrn 2006-01-21 11:02:29
我用php和mysql实现树形菜单，现在已经实现输出形如：

根目录1
子目录1
子目录2
子目录3
根目录2
子目录1
子目录2
根目录3
子目录1
子目录2
根目录4
子目录1
子目录2

我的问题就是如何控制菜单的折叠和伸展，比如说当根目录1没有展开时，点击它就会展开，如果根目录1是展开的，点击就会折叠。其它根目录也是一样。不知道怎么来实现？
...全文
293 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
danis_cn 2006-01-21
  • 打赏
  • 举报
 回复
参考
图片自己设计就可以，如果没有与我联系！

<html>
<head>
<script language="javascript">
<!--
var img_plus = "images/plus.gif";
var img_plus_start = "images/plus_start.gif";
var img_plus_end = "images/plus_end.gif"
var img_plus_start_end = "images/plus_start_end.gif";
var img_minus = "images/minus.gif"
var img_minus_start = "images/minus_start.gif"
var img_minus_end = "images/minus_end.gif";
var img_minus_start_end = "images/minus_start_end.gif"
var img_folder_open = "images/folder_open.gif"
var img_folder_close = "images/folder_close.gif"
var last_id = 0;
var menu_start = 1;
var menu_end = 1;

function showmenu(id){
var last_topmenu, last_menu, last_img_design, last_img_folder;
var topmenu, menu, img_design, img_folder;
var noclose = true;
if (last_id != 0) {
// hide last open menu
last_menu = document.all("menu_" + last_id);
last_topmenu = document.all("topmenu_" + last_id);
last_topmenu.innerHTML = "<font color=black>" + last_topmenu.innerText.replace(/ /g, " ") + "</font>";
if (last_menu.style.display == ""){
last_img_design = document.all("img_design_" + last_id);
last_img_folder = document.all("img_folder_" + last_id);
last_menu.style.display = "none";
if (menu_start != menu_end) { // at least two menus
if (last_id == menu_start)
last_img_design.src = img_plus_start;
else if (last_id == menu_end)
last_img_design.src = img_plus_end;
else
last_img_design.src = img_plus;
} else {
if (last_id == menu_start)
last_img_design.src = img_plus_start_end;
else // should never be here
last_img_design.src = img_plus;
}
last_img_folder.src = img_folder_close;
noclose = false;
}
}
menu = document.all("menu_"+id);
topmenu = document.all("topmenu_" + id);
topmenu.innerHTML = "<font color='#012481'>" + topmenu.innerText.replace(/ /g, " ") + "</font>";
if (id != last_id || noclose) {
img_design = document.all("img_design_" + id);
img_folder = document.all("img_folder_" + id);
menu.style.display = "";
if (menu_start != menu_end) { // at least two menus
if (id == menu_start)
img_design.src = img_minus_start;
else if (id == menu_end)
img_design.src = img_minus_end;
else
img_design.src = img_minus;
} else {
if (id == menu_start)
img_design.src = img_minus_start_end;
else // should never be here
img_design.src = img_minus;
}
img_folder.src = img_folder_open;
}
last_id=id;
}
-->
</script>
<title>菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<link href="../css/index.css" rel="stylesheet" type="text/css">
</head>
<body scroll="auto" style="MARGIN: 0px; overflow-x: hidden; overflow-y:auto" bgcolor="#ACDAFF" >
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="146">
<TR>
<TD width="146" HEIGHT="23" nowrap BGCOLOR="#CCCCCC">
<DIV ALIGN="CENTER"><FONT COLOR="#FF0000"><B>天孚律师后台管理</B></FONT></DIV>
</TD>
</TR>
<TR>
<TD align="center"><font color="#FF0000">中文版管理</font></TD>
</TR>
<TR>

</TR>

<TR>
<TD> <A HREF="javascript:showmenu(101);"> <IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_design_101" SRC="images/plus_start_end.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_folder_101" SRC="images/folder_close.gif"><SPAN ID="topmenu_101"><FONT COLOR="black"></FONT></SPAN></A>目录1</TD>
</TR>
<TR STYLE="display:none;" ID="menu_101">
<TD> <IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_vertline.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/line_tri.gif"><IMG SRC="images/reddot.gif" WIDTH="6" HEIGHT="11"><A HREF="#" TARGET="frmRight">11</A><BR>
<IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_vertline.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_end.gif"><IMG SRC="images/reddot.gif" WIDTH="6" HEIGHT="11"><A HREF="#" TARGET="frmRight">12</A> </TD>
</TR>
<%end if%>
<TR>
<TD> <A HREF="javascript:showmenu(103);"> <IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_design_103" SRC="images/plus_start_end.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_folder_103" SRC="images/folder_close.gif"><SPAN ID="topmenu_103"><FONT COLOR="black"></FONT></SPAN></A>目录2</TD>
</TR>
<TR STYLE="display:none;" ID="menu_103">
<TD> <IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_vertline.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_end.gif"><IMG SRC="images/reddot.gif" WIDTH="6" HEIGHT="11">21</TD>
</TR>

<TR>
<TD> <A HREF="javascript:showmenu(102);"> <IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_design_102" SRC="images/plus_end.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_folder_102" SRC="images/folder_close.gif"><SPAN ID="topmenu_102"><FONT COLOR="black"></FONT></SPAN></A>系统管理</TD>
</TR>
<TR STYLE="display:none;" ID="menu_102">
<TD height="37"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/line_blank.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_end.gif"><IMG SRC="images/reddot.gif" WIDTH="6" HEIGHT="11"><a href="exit.asp">退出系统</a></TD>
</TR>


</TABLE>
</html>

meizz 2006-01-21
  • 打赏
  • 举报
 回复
看看CSDN左边的导航树吧：http://www.meizz.com/Web/Download/MzTreeView10.rar
-神仙- 2006-01-21
  • 打赏
  • 举报
 回复
innerText......
这个东西是ie only的
zhrn 2006-01-21
  • 打赏
  • 举报
 回复
danis_cn(宇宙鸟) ,你好，我按你的做了，没有问题。可是如果换成从数据库里读出来的信息时，点击根目录老是点不开，而且出现提示错误，提示显示：innerText为空或不是对象。不知道是怎么回事，好郁闷。
AdminLTE框架代码实现折叠左侧边栏
AdminLTE框架应用比较普遍，本文通过js代码实现控制左边框的显示与隐藏。
jQuery菜单滑动伸展收缩特效.zip
jQuery菜单滑动伸展收缩特效是一款仿淘宝菜单滑动伸展收缩，功能很实用，代码非常的简单。
基于jquery+bootstrap的侧边栏收缩菜单
基于jquery+bootstrap的侧边栏收缩菜单，实现切换伸展收缩菜单的功能。
QT界面框架（滑动导航条+伸缩菜单）
卤煮仿照Word写的滑动导航条和伸缩菜单。大家有需要可以多多参考！
caidan.rar_伸展树_树型菜单
树型菜单,点击加号时,可以伸展出去,再点一下,可以收回.
基础编程

21,891

社区成员

140,342

社区内容

发帖
与我相关
我的任务
社区描述
从PHP安装配置，PHP入门，PHP基础到PHP应用
社区管理员
  • 基础编程社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章