用XSLT轻松实现树形折叠导航栏(4) - 新闻中心 - 南充市顺庆区小房子和树婚礼策划部
当前位置:首页 > 新闻中心 >

用XSLT轻松实现树形折叠导航栏(4)

编辑:南充市顺庆区小房子和树婚礼策划部时间:2017-09-08 17:52:55阅读次数:2
用XSLT轻松实现树形折叠导航栏(4)


展开和折叠实在就是显示或不显示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。


企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:鄂州网站建设 http://ezhou.45qun.com

上一篇:自定义标签的写法 下一篇:最后一页

相关阅读