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

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