仅当单击后附加项目时显示/隐藏子列表

我有一个父列表，并且该列表中的每个列表都有一个附加的子列表。每个子列表项目都是一个带有关联标签的单选按钮。这允许用户点击标签来设置单选按钮。仅当单击后附加项目时显示/隐藏子列表

当包含内容的页面被加载时，会显示父列表，并且子列表被设置为显示：默认情况下没有。

这一切工作除了 ~~两件事。~~ 一件事

~~1）最初，父列表元素必须被点击两次以显示附加的子列表。~~

~~我想点击一次打开~~

我通过设置 element.style.display = “无” 解决了这个问题;

2）点击子列表中除标签以外的任何地方时，隐藏列表。

因此，如果您选择单选按钮或单击标签旁边的列表折叠。预期的行为是，只有当它被锚定到的父项的列表项被单击时才会发生这种情况。下面

ParentList 
    PItem0 <-------- This should only show/hide the child list 
     ChildList0 
      CItem0 - RadioButton + Label 
      CItem1 - RadioButton + Label 
      CitemN - RadioButton + Label 
    PItem1 
     ChildList1 
      CItem0 - RadioButton + Label 
      CItem1 - RadioButton + Label 
      CitemN - RadioButton + Label 
     . 
     . 
     . 
    PItemN 
     ChildListN 
      CItem0 - RadioButton + Label 
      CItem1 - RadioButton + Label 
      CitemN - RadioButton + Label

HTML页面

目录结构是一个Firefox面板，并建立名单是在内容的脚本代码的内容。

该列表是从json文件动态构建的。

列表的显示/隐藏由函数toggleList完成，该函数在另一个链接在html文件头部的js文件中。它包括一个功能

 function toggleList(listid) { 
      var list = document.getElementById(listid); 
      if (list.style.display == "none"){ 
       list.style.display = "block"; 
      }else{ 
       list.style.display = "none"; 
      } 
     }

的CSS被嵌入在HTML页面的头部是

<style type="text/css" media="all"> 
    body{ 
     font-size: 12px; 
    } 
    ul{ 
     list-style-type:none; 
     padding:0px; 
     margin:0px; 
    } 
    ul .innerlist{ 
     padding:5px; 
     display: none; 
    } 
</style>

的列表与下面的代码动态生成。这是一个Firefox的内容脚本

var alist_div = document.getElementById('alist'); 

//outer list 
var listElement = document.createElement("ul"); 
listElement.setAttribute("class","outerlist"); 

alist_div.appendChild(listElement); 

for (var i = 0; i < data.adata.length; i++){ 

    var listItem = document.createElement("li"); 
    listItem.innerHTML = '<b>'+data.adata[i].description+'</b>'; 

    //inner List 
    var innerListElement = document.createElement("ul"); 
    innerListElement.setAttribute("class","innerlist"); 
    innerListElement.setAttribute("id","innerlist"+i); 

    //show or hide inner list element when the list item it is appended to is clicked 
    listItem.onclick = function(x) { return function() { toggleList(x); console.log(x); }; }(innerListElement.id); 

    for (var j=0; j< data.adata[i].entry.length; j++){ 

    var innerListItem = document.createElement("li"); 


    //pass the item index for the parent and for child as the value and id 
    innerListItem.innerHTML = '<input type="radio" name="aradio" id="'+ i+','+j+'" value="'+ i+','+j+'"><label for="'+ i+','+j+'">' +data.adata[i].entries[j].description+ '</label>'; 
    innerListElement.appendChild(innerListItem); 

    } 

    listItem.appendChild(innerListElement); 
    listElement.appendChild(listItem); 

}

如果有人可以帮助我的 ~~两个问题~~ 问题上面我将不胜感激。如果可能，我宁愿选择非jQuery解决方案。谢谢

来源

2013-11-24 Not_A_Dolphin

我通过设置

innerListElement.style.display ="none" ;

解决问题1我通过

innerListItem.onclick= function stopProp (event){ 
    event.stopPropagation(); 
}

解决问题2

来源

2013-11-25 12:13:01

仅当单击后附加项目时显示/隐藏子列表

回答

相关问题