左侧三级导航

网上很多三级菜单都是静态的，但是我需要一个动态的，找到一个二级动态的，修改了一下成为三级导航菜单。功能还不全，前台没有js功能，链接也为空。这是基于tp框架，先记下这个方法。

首先上的是数据库表：

然后就是action控制代码：

$category = new Model('Category');
        $clist=$category->where("pid=0")->select();
        for($i=0;$i<count($clist);$i++){
            $cclist=$category->where('pid='.$clist[$i]['id'])->select();
            for($j=0;$j<count($cclist);$j++){
                $ccclist=$category->where('pid='.$cclist[$j]['id'])->select();
                for($k=0;$k<count($ccclist);$k++){
                    $sson[]=array('nnnid'=>$ccclist[$k]['id'],'nntitle'=>$ccclist[$k]['name']);
                }
                $son[]=array('nnid'=>$cclist[$j]['id'],'ntitle'=>$cclist[$j]['name'],'nnalis'=>$sson);
                unset($sson);
            }
            $menu[]=array('nid'=>$clist[$i]['id'],'title'=>$clist[$i]['name'],'nalis'=>$son);
            unset($son);
        }
        $this->assign('menu',$menu);
                                                                                                                                                                        
    //
        $this->display();

然后就是前台模版的代码：

<div><!--左侧树状导航栏-->
        <volist name="menu" id='vo'>
            <a href="#">{$vo.nid}{$vo.title}</a><br>
        <volist name="vo.nalis" id='v'>
             <a href="#">&nbsp;&nbsp;{$v.nnid}{$v.ntitle}</a><br />
        <volist name="v.nnalis" id='vv'>
             <a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$vv.nnnid}{$vv.nntitle}</a><br />
        </volist>
        </volist>
        </volist>
    </div>

最后显示的效果：

一切还没成熟，后续修改

----------------------------------------------------------------------------

以下是修改之后的左侧三级导航菜单，加了js

前台模版代码：

<div class="padtb8">
        <volist name="menu" id='vo'>
            <div class="f fblod" id="s{$vo.nid}" onclick="w('{$vo.nid}')" style="background:url(__PUBLIC__/Images/open.gif) no-repeat">
            <a href="__APP__/index/yiji/id/{$vo.nid}">{$vo.title}</a></div>
            <div class="ps" id="{$vo.nid}" style="display:none">
        <volist name="vo.nalis" id='v'>
            <div id="s{$v.nnid}" class="f" onclick="k('{$v.nnid}')">
             <a href="__APP__/index/yiji/id/{$v.nnid}">{$v.ntitle}</a><br />
             </div>
             <div class="ps" id="{$v.nnid}">
        <volist name="v.nnalis" id='vv'>
             <a href="__APP__/index/yiji/id/{$vv.nnnid}">{$vv.nntitle}</a><br />
                                                                                                                          
        </volist>
        </div>
        </volist>
        </div>
        </volist><div class="f fblod"><a href="__APP__/article/pzhishiku">自己的知识库</a></div>
        </div>
    </div>
    </div>
                                                                                                                 
    <script language="javascript" type="text/javascript">
function w(vd)
{
  var ob=document.getElementById(vd);
  if(ob.style.display=="block" || ob.style.display=="")
  {
     ob.style.display="none";
     var ob2=document.getElementById('s'+vd);
     ob2.style.backgroundImage="url(__PUBLIC__/Images/open.gif)";
  }
  else
  {
    ob.style.display="block";
    var ob2=document.getElementById('s'+vd);
    ob2.style.backgroundImage="url(__PUBLIC__/Images/close.gif)";
  }
}
function k(vd)
{
  var ob=document.getElementById(vd);
  if(ob.style.display=="block")
  {
     ob.style.display="none";
     var ob2=document.getElementById('s'+vd);
     ob2.style.backgroundImage="url(__PUBLIC__/Images/open.gif)";
  }
  else
  {
    ob.style.display="block";
    var ob2=document.getElementById('s'+vd);
    ob2.style.backgroundImage="url(__PUBLIC__/Images/close.gif)";
  }
}
</script>

还有一些css：

<style>
.p{margin-left:10px;}
.ps{margin-left:10px;display:none;}
.pss{margin-left:10px;display:block;}
.t{cursor:pointer;background:url(__PUBLIC__/Images/close.gif) no-repeat;line-height:20px; padding-left:20px; height:20px;}
.f{cursor:pointer;background:url(__PUBLIC__/Images/open.gif) no-repeat;line-height:20px; padding-left:20px; height:20px;}
.b{cursor:pointer;background:url(__PUBLIC__/Images/dot.gif) no-repeat;line-height:20px; padding-left:20px; height:20px;}
.fblod{font-weight:bold;}
.padtb8{padding:8px 0;}
.fontred{color:#f00;}
</style>

效果图：

可是这个是不完善的，因为当点击链接时候，左侧导航栏也会被刷新，回到初始的默认状态，之前展开的或者缩起来的都没有了，这个不好。现在用一个方法就是记录点击的链接id，传cookie，然后根据cookieid来判断点击哪里然后展开哪里，可是这样不科学，要是我展开了两个二级菜单，可是点击某一个二级菜单下面的三级菜单，刷新之后就会只展开一个二级菜单栏。

-----------------------------------------------------------

正在尝试用jq的方法，通过a来绑定点击事件，然后显示，不过函数同时要传一个false值。让左侧不刷新