下面图老师小编跟大家分享用XSLT轻松实现树形折叠导航栏(4)，一起来学习下过程究竟如何进行吧！喜欢就赶紧收藏起来哦~
【 tulaoshi.com - Web开发 】
展开和折叠其实就是显示或不显示display：none or block）它与可见与不可见（visible or invisible）是有区别的， 前者不在页面预留空间。 这个toggle函数完成两个功能， 改变TR原来的Hidden属性， 使原来不显示的显示； 改变IMG的src属性， 更改图片。
toggle.js
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）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。
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）来源:https://www.tulaoshi.com/n/20160219/1624191.html
看过《用XSLT轻松实现树形折叠导航栏(4)》的人还看了以下文章 更多>>
