J2EE收缩树

最新推荐文章于 2025-09-10 16:16:57 发布

原创最新推荐文章于 2025-09-10 16:16:57 发布 · 562 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #menu #div #function #c

jsp 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用JSTL和JavaScript创建动态树状菜单，通过遍历数据集合来生成菜单结构，并利用JavaScript控制菜单的展开与折叠。

做这个用到：JSTL+JAVASCRIPT 并且是数据是从数据查出来的。

直接看代码吧：
######################################################
</head>
<script type="text/javascript">
function menu(treeId)
{
  //alert(treeId);
  var div=document.getElementById("divbs"+treeId);
  if(div.style.display=="")
  {
   div.style.display="none";
  }else
  {
   div.style.display="";
  }
}
</script>
</head>

<body>
//迭代数据集合
<c:forEach items="${requestScope.bsList}" var="bs">
//先打印出父节点
<c:if test="${bs.bs_fatherid==0}">
    <div onClick="menu('${bs.bs_id}')" style="cursor:pointer">${bs.bs_name}</div>
     <div id="divbs${bs.bs_id}" >
      <c:forEach items="${requestScope.bsList}" var="bb">
      //如果第一个循环中的id等于第二个循环中的父节点就打印出这个节点的名称
      <c:if test="${bs.bs_id==bb.bs_fatherid}">
      <a href="#">${bb.bs_name}</a><br>
      </c:if>
      </c:forEach>
   </div>
    </c:if>

    </c:forEach>
</body>
######################################################