快捷導(dǎo)航

jquery實(shí)現(xiàn)點(diǎn)擊TreeView文本父節(jié)點(diǎn)展開(kāi)/折疊子節(jié)點(diǎn)

更新時(shí)間：2013年01月10日 15:52:06 作者：

今天客戶(hù)提出要點(diǎn)擊菜單（TreeView實(shí)現(xiàn)的）的父級(jí)節(jié)點(diǎn)時(shí)，展開(kāi)節(jié)點(diǎn),很多新手朋友可能對(duì)此會(huì)很陌生，接下來(lái)介紹解決方法，感興趣的朋友可以了解下

以前一個(gè)現(xiàn)在不用的帳號(hào)發(fā)布的隨筆，現(xiàn)在人肉搬過(guò)來(lái)吧。
注冊(cè)用戶(hù)有一段時(shí)間了，一直很忙，到現(xiàn)在還沒(méi)有寫(xiě)一篇，忽然覺(jué)的一定要花點(diǎn)時(shí)間記錄和總結(jié)一些東西。好吧，就從這里開(kāi)始了。

今天客戶(hù)提出要點(diǎn)擊菜單（TreeView實(shí)現(xiàn)的）的父級(jí)節(jié)點(diǎn)時(shí)，展開(kāi)節(jié)點(diǎn)。心想這個(gè)應(yīng)該是很常見(jiàn)的功能吧，特意google了一下，發(fā)現(xiàn)大部分是將的不是js實(shí)現(xiàn)的，有些js實(shí)現(xiàn)的寫(xiě)的麻煩，干脆自己寫(xiě)一個(gè)吧，應(yīng)該不難的。

首先思路是，

，讓文本點(diǎn)擊的時(shí)候執(zhí)行左邊‘+'號(hào)的事件，查看源碼看到，‘+'號(hào)的事件是：
javascript:TreeView_ToggleNode(ctl00_body__menuTree_Data,0,document.getElementById('ctl00_body__menuTreen0'),' ',document.getElementById('ctl00_body__menuTreen0Nodes'))
Ok,接下來(lái)就是篩選出所有的父級(jí)節(jié)點(diǎn)，加上處理事件就ok了，下面是完整代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$().ready(function() 
{ 
$("img[src$=tv_NoExpend.jpg]").each(function()//篩選出所有的父級(jí)node 
{ 
//ctl00_body__menuTreet4i//父級(jí)node的id是這樣的規(guī)則:ctl00_body__menuTreet加id加i 
var id = $(this).parent().attr("id").replace("ctl00_body__menuTreet","").replace("i",""); 
var nId = 'ctl00_body__menuTreen'+id; 
BindExpandJs($("#ctl00_body__menuTreet"+id+"i"),nId);//給‘文件夾'圖片綁定事件 
BindExpandJs($("#ctl00_body__menuTreet"+id),nId); //給'文本節(jié)點(diǎn)'綁定事件 }); 
}); 
function BindExpandJs(obj,nId) 
{ 
$(obj) 
.css("cursor","pointer") 
.removeAttr("href") 
.click(function() 
{ 
TreeView_ToggleNode(ctl00_body__menuTree_Data,0,document.getElementById(nId),' ',document.getElementById(nId+'Nodes')); 
}); 
} 
</script> 