仅在单击附加到的项目时才显示/隐藏子列表

Question

我有一个父列表，该列表的每个 li 都有一个附加的子列表。每个子列表项都是一个带有关联标签的单选按钮。这允许用户单击标签来设置单选按钮。

加载包含内容的页面时，会显示父列表，而子列表默认设置为 display:none。

除了两件事之外，这一切都有效。一件事

1) 最初必须单击父列表元素两次才能显示附加的子列表。

我想点击一下打开

我通过设置解决了这个问题 element.style.display ="none" ;

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

嵌入在html页面头部的CSS是

<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 解决方案。谢谢

Answer 1

我通过设置解决了问题1

innerListElement.style.display ="none" ; 

我通过

解决了问题 2

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