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

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

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

我的问题就是如何控制菜单的折叠和伸展，比如说当根目录1没有展开时，点击它就会展开，如果根目录1是展开的，点击就会折叠。其它根目录也是一样。不知道怎么来实现？
...全文
289 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框架通过CSS类实现了边栏的折叠和展开的视觉效果。在CSS中定义了`.collapse-left`类，这个类默认情况下是应用于左侧边栏的，当触发折叠操作时，左侧边栏的这个类会被移除。相应地，AdminLTE还定义了...
jQuery菜单滑动伸展收缩特效.zip
"jQuery菜单滑动伸展收缩特效"是一个典型的应用实例，它旨在模仿淘宝网的菜单行为，实现优雅的展开和折叠效果。这个特效能够使用户界面更加友好，提升用户体验。 首先，jQuery的核心在于其简洁的API，使得开发者...
基于jquery+bootstrap的侧边栏收缩菜单
在网页设计和开发中，创建一个可伸展和收缩的侧边栏菜单是常见的需求，尤其是在响应式设计中。这个项目使用了jQuery和Bootstrap这两个强大的工具来实现这一功能。jQuery是一个轻量级、功能丰富的JavaScript库，而...
QT界面框架（滑动导航条+伸缩菜单）
本文将详细解析"QT界面框架（滑动导航条+伸缩菜单）"这一主题，以及如何利用QT库实现滑动导航条和伸缩菜单。 首先，QT是Qt Company开发的一个开源跨平台应用程序开发框架，它基于C++，提供了丰富的API和面向对象的...
caidan.rar_伸展树_树型菜单
在"caidan.rar_伸展树_树型菜单"这个压缩包中，尽管没有具体的代码或详细描述，我们可以推断出它可能包含了一些关于如何创建和实现伸展树的示例文件或教程。"新建文件夹"可能是存放这些资源的目录。实际学习时，可以...
基础编程

21,891

社区成员

140,342

社区内容

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

加载中

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

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

+ 用AI写文章