正在阅读：用XSLT轻松实现树形折叠导航栏用XSLT轻松实现树形折叠导航栏

2004-02-14 09:33 出处：奥索网作者：vinekey 责任编辑：pjl

展开和折叠其实就是显示或不显示display：none or block）它与可见与不可见（visible or invisible）是有区别的，前者不在页面预留空间。这个toggle函数完成两个功能，改变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的功能还是最基本的，例如我还未做内容和目录的同步，其中有的地方还可以修改，对xml和xsl文件可以进一步瘦身。不过对一般用户来讲，这已经足够了。真诚希望这篇文章能对您有所启发、有所帮助，以后做出更酷、更快、更方便、功能更强的TOC。