添加类名并单击expand/Collaspe with javascript

我需要一些关于JavaScript的帮助。我想在程序中的每个节点元素中添加一个click函数，还想在JavaScript的帮助下添加类名。我的意思是单击功能是，如果我单击项目，它将关闭，如果我再次单击项目，它将显示结果。以下是我的JavaScript代码，我正在将live fiddle附加到我正在使用的程序中。请注意，我希望代码使用JavaScript，而不是Jquery

---

---

函数生成（节点）{
如果（node.nodeType！=1）返回“”；
var html=“
”+node.nodeName+“=”+node.childNodes.length；
var htmlForChildNodes=“”；
对于（var i=0；i”+htmlForChildNodes+””；
}
html+=“
”；
返回html；
}

---

---

谢谢

您可能应该尝试使用

var li=document.createElement（'li'）

，然后

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

请看这里：

此函数将生成您的

ul

列表，当单击某个元素时，它将获得单击的类

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;
}

以下是我的建议：

JavaScript:

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

CSS:

---

如果您将列表名称用

括起来，您可以使用以下内容；
// ...
var a=document.getElementsByTagName（'a'）；
对于（变量i=0，len=a.length；i-1
？ul[0].类名.replace（'折叠'，''）
：ul[0]。类名+“折叠”；
}
返回false；
}，假）；
}

---

演示

使用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();
});

---

var txt='Daily Italian
你能告诉我怎么做吗……因为我尝试过这种方法，但没有成功。我使用的是live fiddle。这是一个纯JavaScript解决方案，不必使用jQuery。有没有提到使用jQuery的任何内容？@VisioN使用jQuery是一种犯罪行为？没有。但为什么不给出一个解释呢那么用VBScript解决方案呢？如果可以的话，你可以试试。我不会这么做，因为问题中没有提到VBScript，也没有提到jQuery。如果你想建议OP使用jQuery，那么在答案中提到这个建议并用better替换所有纯JS构造，如
document.body.innerHTML
（更快）非常感谢。它工作得很好，我只是想知道如何对每个Elements@user3314588什么排序？我对节点元素进行排序如果你在实时小提琴中看到，你会看到标题、作者、年份、价格。我只是想知道如何在作者、价格、标题中排序，year@user3314588那是另一个原因估计，伙计。先生，我需要一些逻辑，这样我就可以开始排序了，但我知道所有的basci知识，我的意思是我应该如何在我的程序中开始排序它工作得很好，只是想知道如何对每个元素进行排序。关于对html元素进行排序，有一个问题：你们应该注意，类列表是一个非常好的工具新功能，它可能不适用于所有人，例如li.clicked {
    display: block;
}

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

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

li.selected ul {
    display: none;
}

// ...
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);
}

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();
});