左側三級導航

網上很多三級菜單都是靜態的，但是我需要一個動態的，找到一個二級動態的，修改了一下成爲三級導航菜單。功能還不全，前臺沒有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值。讓左側不刷新