希望将展开和折叠功能添加到作为父节点的动态生成的文件中

want to add expand and collapse functionality to a dynamically generated file as parent node

本文关键字：父节点 动态 文件 折叠 添加 功能 希望      更新时间：2023-09-26

im正在开发一个网页，因为im将测试套件文件显示为父节点，而测试套件文件中的tescase是子节点。。我正在向父节点和子节点添加复选框。。我想要的是，我想向父节点添加展开和折叠选项。。默认情况下，当页面加载时，它应该被折叠，当我单击父节点时，它应被折叠。。plzz我尝试了很多方法，但都没能成功。。任何帮助都将不胜感激。。提前感谢

  <script type="text/javascript">
     //ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))

     function getAlldetails()
         {
var xmlhttp;
xmlhttp = new XMLHttpRequest();
//alert("hello");
//alert("ok");
//Create a asynchronous GET request
xmlhttp.open("GET",
        "http://localhost:8080/sample/Husky?action=profilevalues", true);
//alert("checkig");
xmlhttp.send();
//alert("after send request");
xmlhttp.onreadystatechange = function() {

    //alert("ready state:::"+xmlhttp.status);
    if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
            var response = xmlhttp.responseText;
            var data = eval("(" + response + ")");//json data get
            //alert(data);
            var rootinfo=data.rootdirectory;
            var dir=rootinfo.root;
            //alert(rootinfo.root);
            var allfiles=data.listfiles;
            //alert(allfiles);
             // Make the list itself which is a <ul>
             var listElement = document.getElementById("treemenu1");
             listElement.innerHTML=dir;
             var breakinfoone=document.createElement("br");
             sessionStorage.setItem("filetwo","");
             listElement.appendChild(breakinfoone);

            for ( var i = 0; i<allfiles.length; i++) {
                var subobj = allfiles[i];
                var id = subobj.singlefile;
            var labelinfo=document.createElement("label");
            var breakinfo=document.createElement("br");
            labelinfo.innerHTML="&nbsp&nbsp&nbsp&nbsp"+id;
            var ptworkinfo=document.createElement("input");   
                ptworkinfo.innerHTML="&nbsp&nbsp&nbsp&nbsp"+id;
                ptworkinfo.type="checkbox";
                ptworkinfo.id="cbox"+i;
                ptworkinfo.value=id;
                listElement.appendChild(ptworkinfo);
                listElement.appendChild(labelinfo);
                listElement.appendChild(breakinfo);
                ptworkinfo.onchange = function(event) {
                     if(document.getElementById(this.getAttribute("id")).checked)
                     {
                        alert(this.getAttribute("value"));
                        sessionStorage.setItem("filetwo", this.getAttribute("value"));
                     }
                     else
                      {
                            sessionStorage.setItem("filetwo","");
                      }
                 }                      
            }   
        }           
    }
};
 }

我认为您正在创建ajax调用成功中的父节点和子节点。所以，只有在将事件添加到DOM之后，才必须附加事件。

或

您可以使用jQuery"在"；方法添加到父节点。

$（"body"）.on（"click"，"parent_elements_selector"，function（）{

//切换父类

})；

定义一个CSS类，例如"collapsed"，它将隐藏列表元素中的列表项。然后在点击列表元素时切换类：

listElement.onclick = function() {
  this.classList.toggle("collapsed");
}

Js小提琴http://jsfiddle.net/gh424/2/

当然，点击列表中的元素会触发点击列表本身，并进行切换。如果这不是所需的行为，那么可以考虑将列表包装到div中，例如：

<div class="container">
    <div class="toggler">Toggles the lsit</div>
    <ul class="collapsed">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
相关文章：