Question

我需要JavaScript的一些帮助。我想在我的程序中为每个节点元素添加一个click函数，并希望在JavaScript的帮助下添加类名。我的意思是点击功能是，如果我点击项目它将关闭，如果我再次点击项目水果与出现。以下是我的JavaScript代码，我附加实时小提琴，所以我正在使用的程序。请给我希望代码使用JavaScript而不是Jquery。

Live Fiddle

item
  fruits
     Orange
     Banana
     Mango

function generate(node) {
    if (node.nodeType != 1) return "";
    var html = "<li>" + node.nodeName + " = " + node.childNodes.length;
    var htmlForChildNodes = "";
    for (var i = 0; i < node.childNodes.length; i++) {
        htmlForChildNodes += generate(node.childNodes[i]);
    }
    if (htmlForChildNodes) {
        html += "<ul>" + htmlForChildNodes + "</ul>";
    }
    html += "</li>";
    return html;
}

谢谢

Answer 1

如果您使用<a>元素包装列表名称，则可以使用以下内容：

// ...
var html = "<li><a href='javascript:;'>" + node.nodeName + "</a>";
// ...

var a = document.getElementsByTagName('a');
for (var i = 0, len = a.length; i < len; i++) {
    a[i].addEventListener('click', function() {
        var ul = this.parentNode.getElementsByTagName('ul');
        if (ul.length) {
            ul[0].className =
                ul[0].className.indexOf('collapsed') > -1
                    ? ul[0].className.replace('collapsed', '')
                    : ul[0].className + ' collapsed';
        }

        return false;
    }, false);
}

DEMO http://jsfiddle.net/32eVr/26/

Answer 2

您应该尝试使用var li = document.createElement('li')然后

li.addEventListener('click', function() {
   // Add class here
});

看看这里：http://jsfiddle.net/32eVr/30/

此功能将生成您的ul列表，当点击某个元素时，它将获得课程clicked

function generate(node) {
    if (node.nodeType != 1) return null;
    var html = document.createElement("li");
    var text = document.createTextNode(node.nodeName);
    html.addEventListener('click', function() {
       this.className = "clicked";
    });
    html.appendChild(text);
    var htmlForChildNodes = document.createElement("ul");
    for (var i = 0; i < node.childNodes.length; i++) {
        var child = generate(node.childNodes[i]);
        if(child !== null)
            htmlForChildNodes.appendChild(child);
    }
    html.appendChild(htmlForChildNodes);
    if (htmlForChildNodes.hasChildNodes) {
        return html;
    }
    return null;
}

在你的CSS中你可以像

这样的东西

li.clicked {
    display: block;
}

/* Hide elements except the top level */
li > ul > li {
    display: none;
}

Answer 3

以下是我的建议：

JavaScript的：

document.querySelector("ul").addEventListener("click", function(event) {
    event.target.classList.toggle("selected");
});

CSS：

li.selected ul {
    display: none;
}

http://jsfiddle.net/nsZS8/

Answer 4

使用jquery使其更容易。请尝试以下，

var txt = '<?xml version="1.0" encoding="UTF-8"?><bookstore>    <book category="cooking">        <title lang="en">Everyday Italian</title>        <author>Giada De Laurentiis</author>        <year>2005</year>        <price>30.00</price>    </book>    <book category="children">        <title lang="en">Harry Potter</title>        <author>J K. Rowling</author>        <year>2005</year>        <price>29.99</price>    </book>    <book category="web">        <title lang="en">XQuery Kick Start</title>        <author>James McGovern</author>        <author>Per Bothner</author>        <author>Kurt Cagle</author>        <author>James Linn</author>        <author>Vaidyanathan Nagarajan</author>        <year>2003</year>        <price>49.99</price>    </book>    <book category="web" cover="paperback">        <title lang="en">Learning XML</title>        <author>Erik T. Ray</author>        <year>2003</year>        <price>39.95</price>    </book></bookstore>';

function generate(node) {
    if (node.nodeType != 1) return "";
    var html = "<li class='book'>" + node.nodeName;
    var htmlForChildNodes = "";
    for (var i = 0; i < node.childNodes.length; i++) {
        htmlForChildNodes += generate(node.childNodes[i]);
    }
    if (htmlForChildNodes) {
        html += "<ul>" + htmlForChildNodes + "</ul>";
    }
    html += "</li>";
    return html;
}

if (window.DOMParser) {
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(txt, "text/xml");
} else { // Internet Explorer
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = false;
    xmlDoc.loadXML(txt);
}

document.body.innerHTML = "<ul>"+generate(xmlDoc.documentElement)+"</ul>";

$('body').on('click','.book',function(e){
    $(this).find('ul').slideToggle();
    e.stopPropogation();
});

Fiddle

添加类名，然后单击展开/使用javascript折叠

4 个答案: