专注优质Wordpress企业网站搭建与优化

一花一世界 – CSS实例教程：树型列表的实现（下）



原文地址：Turning Lists into Trees

翻译整理：西米CC

显然，树型结构中最后一个节点需要我们单独设计。首先它的背景图片必须是独特的L型：

CSS实例教程：树型列表的实现

其次，竖线背景在最后一个节点处必须结束，我们可以通过设置其背景色为白色(仅针对本例),项目的背景图片覆盖在背景色之上，这样就替代了原来的竖线：

  1. ul.tree li.last {
  2. [color=Maroon] background: #fff url(lastnode.png) no-repeat;
  3. }

但是浏览器并不知道哪个是尾节点，所以我们为每个尾节点添加一个last类进行声明：

  1. <ul class="tree">
  2. <li>Animals
  3. <ul>
  4. <li>Birds</li>
  5. <li>Mammals
  6. <ul>
  7. <li>Elephant</li>
  8. <li>&gt;Mouse</li>
  9. </ul>
  10. </li>
  11. <li>&gt;Reptiles</li>
  12. </ul>

或者我们也可以通过一段JS来实现这个功能：

  1. <script type="text/javascript">// <![CDATA[
  2. [color=Maroon]window.onload = function () {
  3. var tree = document.getElementById("tree");
  4. var lists = [ tree ];
  5. for (var i = 0; i < tree.getElementsByTagName("ul").length; i++)
  6. lists[lists.length] = tree.getElementsByTagName("ul")[i];
  7. for (var i = 0; i < lists.length; i++) {
  8. var item = lists[i].lastChild;
  9. while (!item.tagName || item.tagName.toLowerCase() != "li")
  10. item = item.previousSibling;
  11. item.className += " last";
  12. }
  13. };</font>
  14. // ]]></script>
  15.  
  16.  
  17. <ul class="tree">&gt;
  18. <li>Animals
  19. <ul>
  20. <li>Birds</li>
  21. <li>Mammals
  22. <ul>
  23. <li>Elephant</li>
  24. <li>Mouse</li>
  25. </ul>
  26. </li>
  27.  
  28. </ul>

不过JQuery的拥趸可能更乐意使用如下JS代码：

  1. <script type="text/javascript">// <![CDATA[
  2. [color=Maroon]   $(document).ready(function () {
  3. $(&#39;ul.tree li:last-child&#39;).addClass(&#39;last&#39;);
  4. });</font>
  5. // ]]></script>

事实上你也可以注意到，为每个尾节点添加last样式有一点违背保持HTML代码简洁性的初衷。如果你对此比较介意的话，我们也可以用last-child伪类来替代实现：

  1. ul.tree li:last-child {
  2. background: #fff url(lastnode.png) no-repeat;
  3. }

不幸的是，伪类的定义还没有正式聚合到CSS2规范中，现在还有一些浏览器缺乏对它的支持性。

[ 以下内容您也可能感兴趣 ]

Categories: DIV+CSS重构标准

Tags: ,

Subscribe to Comments

Add a Comment