用XSLT簡單完成樹形折疊導航欄(4)
發(fā)表時間:2024-06-13 來源:明輝站整理相關軟件相關文章人氣:
[摘要]展開和折疊其實就是顯示或不顯示display:none or block)它與可見與不可見(visible or invisible)是有區(qū)別的, 前者不在頁面預留空間。 這個toggle函數(shù)完成兩個功能, 改變TR原來的Hidden屬性, 使原來不顯示的顯示; 改變IMG的src屬性, 更改圖片...
展開和折疊其實就是顯示或不顯示display:none or block)它與可見與不可見(visible or invisible)是有區(qū)別的, 前者不在頁面預留空間。 這個toggle函數(shù)完成兩個功能, 改變TR原來的Hidden屬性, 使原來不顯示的顯示; 改變IMG的src屬性, 更改圖片。
toggle.js
function toggle(id)
{
var thisRow = document.all.item(id);
if (thisRow)
{
if (thisRow.getAttribute("Expanded") == 'yes')
{
thisRow.setAttribute("Expanded", "no");
thisRow.children(0).children(0).children(0).src = "images/bs.gif";
var allRows = document.all.tags("TR");
for (var i=1; i < allRows.length; i++)
{
var row = allRows[i];
if (row.getAttribute("AncestorID") == id)
{
if (row.getAttribute("Expanded") == 'yes') {
toggle(row.getAttribute("id"));
}
row.className = 'Navigator-Hidden';
}
}
thisRow.className = 'Navigator';
}
else
{
thisRow.setAttribute("Expanded", "yes");
thisRow.children(0).children(0).children(0).src = "images/bo.gif";
var allRows = document.all.tags("TR");
var depth = parseInt(thisRow.getAttribute("Depth"));
for (var i=1; i < allRows.length; i++)
{
var row = allRows[i];
if (row.getAttribute("AncestorID") == id &&
parseInt(row.getAttribute("Depth")) == depth + 1 )
{
row.className = 'Navigator';
}
}
}
}
}
到此結束。
誠然這個TOC的功能還是最基本的, 例如我還未做內(nèi)容和目錄的同步,其中有的地方還可以修改, 對xml和xsl文件可以進一步瘦身。 不過對一般用戶來講, 這已經(jīng)足夠了。
真誠希望這篇文章能對您有所啟發(fā)、有所幫助, 以后做出更酷、更快、更方便、功能更強的TOC。