的JavaScript扩展的树状轻量级

-1

我想要一个轻量级的解决方案，所以我发现这一个，但它只是扩展了点击加号“+”旁边的可扩展类的名称。我替换了红色的正方形和蓝色的正方形，这个示例正常工作。住址代码：http://jsfiddle.net/2VXuk/2/的JavaScript扩展的树状轻量级

我需要帮助修改它，使任何可扩展的子级别成为不是链接的类别，并在点击其名称时展开其内容。

将是巨大的，有选择，使其类别 - 扩大点击或链接扩大+点击重定向名称点击。例如

<ul id="sitemap"> 
<li><a class="category" href="#">expands only</a> 
    <ul> 
     <li><a href="#">Sample</a></li> 
     <li><a href="#">Sample</a></li> 
     <li><a class="category_and_link" href="psy.html">Link to page or expand on + button</a> 
      <ul> 
       <li><a href="#">Sample</a></li> 
       <li><a href="#">Sample</a></li> 
       <li><a href="#">Sample</a></li> 
       <li><a href="#">Sample</a></li> 
       <li><a href="#">Sample</a></li> 
      </ul>       
     </li> 
     <li><a href="#">Fourth link</a></li> 
     <li><a href="#">Fifth link</a></li> 
    </ul>     
</li> 
</ul> 

<script type="text/javascript"> 
this.sitemapstyler = function(){ 
    var sitemap = document.getElementById("sitemap") 
    if(sitemap){ 

     this.listItem = function(li){ 
      if(li.getElementsByTagName("ul").length > 0){ 
       var ul = li.getElementsByTagName("ul")[0]; 
       ul.style.display = "none"; 
       var span = document.createElement("span"); 
       span.className = "collapsed"; 
       span.onclick = function(){ 
        ul.style.display = (ul.style.display == "none") ? "block" : "none"; 
        this.className = (ul.style.display == "none") ? "collapsed" : "expanded"; 
       }; 
       li.appendChild(span); 
      }; 
     }; 

     var items = sitemap.getElementsByTagName("li"); 
     for(var i=0;i<items.length;i++){ 
      listItem(items[i]); 
     }; 

    }; 
}; 

window.onload = sitemapstyler; 
</script>

来源

2012-05-12 redacted

见我fork of your jsFiddle.的基本思路是抓住a元素...

var a = li.getElementsByTagName("a")[0];

，并添加一个事件处理它。

if (!a.hasAttribute("href")) 
    a.onclick = showHide;

对于非链接，只需忽略href属性。

来源

2012-05-12 01:52:08 mgiuffrida

我没有看到所期望我点击“第一链接”（词不是箱）其工作，并没有展开...... – redacted

@redacted我的坏了，忘了点击“更新”。尝试新的链接。 – mgiuffrida

伟大的工作，但可以请你解释一下，我可以修改，所以如果类是连接我几乎不知道它的JavaScript之前不打算页面扩大。 – redacted

的JavaScript扩展的树状轻量级

回答

相关问题