网上很多三级菜单都是静态的，但是我需要一个动态的，找到一个二级动态的，修改了一下成为三级导航菜单。功能还不全，前台没有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="#"> {$v.nnid}{$v.ntitle}</a><br />
<volist name="v.nnalis" id='vv'>
<a href="#"> {$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值。让左侧不刷新
