如何实现菜单树的折叠与展开？

renwangxing 2008-07-21 04:56:43

假设，我有三级菜单页面，一级菜单页面是横放在logo的下面，二三级菜单是放在左边的frame里面，我点击一级菜单，出现有两个按钮，一个是折叠按钮，一个是展开按钮
当我点击折叠按钮时，该一级菜单下面的所有菜单都不显示出来，当我点击展开按钮时，该一级菜单下面的所有菜单及其子菜单都要显示出来，如何处理？javascript代码怎么样写啊？
举例html代码:

<ul><li>1</li>

     <li><ul>

        <li>11</li>

        <li>12</li>

        <li>13</li>

        <li>14</li>

	</ul>

    </li>

    <li>2</li>

    <li><ul>

        <li>21</li>

        <li>22</li>

        <li>23</li>

        <li>24</li>

	</ul>

    </li>

    <li>3</li>

     <li><ul>

       <li>31</li>

        <li>32</li>

        <li>33</li>

        <li>34</li>

	</ul>

    </li>

 </ul>

...全文

311 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

wang87325 2008-07-21

打赏
举报

我也是同样的问题，up

jingulang 2008-07-21

打赏
举报

不懂帮顶

孔子-说 2008-07-21

打赏
举报

用个迭代标签来做啊 http://blog.csdn.net/carefree31441

renwangxing 2008-07-21

打赏
举报

楼上的理解错误了不是那样一个一个点击是一个按纽整个 3级目录全部打开而且那个是动态3级目录也就是你开始不知道有多少个目录不能一个个去点击的

我的想法是这样的在哪个循环里用JSP 设置个变量然后用点击的 JS 控制这个变量给它设置display 属性值
怎么实现麻烦大家告诉下

imA 2008-07-21

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <script>

  function expand(node){

	var node=document.getElementById(node);

	if(node.style.display=="block")

		node.style.display="none";

	else

		node.style.display="block"

  }

  </script>

 </HEAD>



 <BODY>

  <ul><li ondblclick ="expand('first')" style="display: block; cursor : hand; color: red;">1</li>

     <li id="first"><ul>

        <li>11</li>

        <li>12</li>

        <li>13</li>

        <li>14</li>

    </ul>

    </li>

    <li ondblclick ="expand('second')" style="display: block; cursor: hand; color: red;">2</li>

    <li id="second"><ul>

        <li>21</li>

        <li>22</li>

        <li>23</li>

        <li>24</li>

    </ul>

    </li>

    <li ondblclick ="expand('third')" style="display: block; cursor: hand; color: red;">3</li>

     <li id="third"><ul>

       <li>31</li>

        <li>32</li>

        <li>33</li>

        <li>34</li>

    </ul>

    </li>

 </ul>

 </BODY>

</HTML>