-1

我想要一个轻量级的解决方案，所以我找到了这个，但是它只在单击可扩展类别名称旁边的加号“+”时扩展。我将 + 替换为红色方块，将 - 替换为蓝色方块，以使该演示正常工作。现场代码：http: //jsfiddle.net/2VXuk/2/

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

如果可以选择将其设为一个类别，那就太好了 - 单击时展开或链接在 + 单击时展开，并在名称单击时重定向。例如

<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>
4

1 回答 1

0

请参阅我的 jsFiddle 分支。基本思路是抓取a元素...

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

并为其添加一个事件处理程序。

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

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

于 2012-05-12T01:52:08.097 回答