Question

前台js如何控制无限级分类输出

我后台已经写出
顶级分类一--------------------------------------------编辑 删除
子类一---------------------------------------------编辑 删除
子类一--------------------------------------------编辑 删除
顶级分类二--------------------------------------------编辑 删除
子类二--------------------------------------------编辑 删除
子类二--------------------------------------------编辑 删除
子类二子分类-----------------------------编辑 删除
前台可以遍历显示，但是我要求子类是默认隐藏的，当点击时候再显示！代码如何写

Answer 1

设计div的InnerHTML

html+=

按钮点击事件设计为修改div的class属性，设计它是该隐藏还是该显示。

Answer 2

前台遍历的时候。如果是子类。就display:none; 然后绑定事件。点击上一级显示子类

追问

我这样遍历出来的虽然从格式上能看出小类是属于哪个大分类的。但是从逻辑关系上是平级的，所谓点击上一级显示子类，确定不了啊

追答

能不能给出遍历输出后的DOM

Answer 3

你首先要能分辨出哪是顶级分类那是子分类。然后：

1、先循环顶级分类，并给其添加事件（点击）及设定ID；
2、点击时，根据顶级分类检索其下所有子分类后添加到该顶级分类下面。

追问

遍历出的数组中有lev字段，设置当为0时候不缩进，1时候缩进1个空格，2时候缩进2个空格。。。我遍历出来的是完整列表数组，如果按照你说的方法遍历，第二级遍历就比较复杂了，而且我是做的无限级分类

追答

那你就加一个样式吧：

1、构建一个ul，存放顶级分类列表，当碰到lev=0的时候，样式为margin-left:0px;；

2、当碰到lev=1的时候,再构建一个ul，样式为：margin-left:10px;display:none。例如：

　　

<ul>
     <li onclick="lev1.style.display='block'">
             +顶级节点1
            <ul  id="lev1" style="display:none; margin-left:10px;">
                <li>第1节点--1</li>
                <li>第1节点--2</li>
            </ul>
     </li>
    <li onclick="lev2.style.display='block'">
             +顶级节点2
            <ul  id="lev2" style="display:none; margin-left:10px;">
                <li>第2节点--1</li>
                <li>第2节点--2</li>
            </ul>
     </li>
 </ul>