Question

＆＃13;

<html>

<div id="menuID" style="visibility:hidden">
  <menuItems numItems="2">
    <items nname="Site Menu" numItems="3">
      <item>
        <mname>What's New</mname>
        <mvalue>http://yahoo.com</mvalue>
      </item>
      <item>
        <mname>What's Hot</mname>
        <mvalue>some URL</mvalue>
      </item>
      <item>
        <mname>Revised Scripts</mname>
        <mvalue>http://cnn.com/</mvalue>
      </item>
    </items>

    <items nname="FAQ Help" numItems="3">
      <item>
        <mname>Usage Terms</mname>
        <mvalue>some URL</mvalue>
      </item>
      <item>
        <mname>DHTML FAQs</mname>
        <mvalue>some URL</mvalue>
      </item>
      <item>
        <mname>Scripts FAQs</mname>
        <mvalue>some URL</mvalue>
      </item>
    </items>
  </menuItems>
</div>

<head>

  <script type="text/javascript">
    function parse() {
      var root = document.getElementById("menuID");
      for (i = 0; i < root.childNodes.length; i++)

        for (i = 0; i < root.childNodes.length; i++)
          if (root.childNodes[i].nodeName.toLowerCase() == 'menuitems') {

            var aNode = root.childNodes[i];
            for (j = 0; j < aNode.childNodes.length; j++)
              if (aNode.childNodes[j].nodeName.toLowerCase() == 'items') {
                var heading = document.createElement("div");
                root.appendChild(heading);
                heading.innerHTML = aNode.childNodes[j].getAttribute("nname");
                heading.style.visibility = "visible";
                heading.setAttribute('id', heading.innerHTML)
                //Create lists for each heading
                var uList = document.createElement("menu");
                uList.setAttribute('type', "list");
                heading.appendChild(uList);
                var uListID = heading.getAttribute('id') + j;
                uList.setAttribute('id', uListID);
                //document.write("ab " + uList.id + '<br>');
                uList.style.display = 'none';
                //uList.onmouseover = display(this.id);
                uList.setAttribute('onclick', 'display(this.id)');
                var bNode = aNode.childNodes[j];
                for (k = 0; k < bNode.childNodes.length; k++)
                  if (bNode.childNodes[k].nodeName.toLowerCase() == 'item') {
                    var cNode = bNode.childNodes[k];
                    var list = document.createElement("li");
                    uList.appendChild(list);
                    var lnk = document.createElement("a");
                    for (l = 0; l < cNode.childNodes.length; l++) {
                      if (cNode.childNodes[l].nodeName.toLowerCase() == "mname") {
                        var hContent = cNode.childNodes[l].innerHTML;
                        lnk.innerHTML = hContent;
                      } else if (cNode.childNodes[l].nodeName.toLowerCase() == "mvalue") {
                        var hURL = cNode.childNodes[l].innerHTML;
                        lnk.setAttribute("href", hURL);
                      }
                    }
                    list.appendChild(lnk);
                  }
              }
          }

    }
  </script>

</head>

<body onLoad="parse();">
</body>


<script>
  function display(listID) {
    var thisList = document.getElementById(listID);
    if (thisList.style.display = 'none') {
      (thisList).style.display = 'block';
    }
  }
</script>

</html>

＆＃13;

我正在开发一个JavaScript / HTML项目，我需要创建一个可折叠的菜单。需要使用DOM walk动态创建菜单。我有脚本工作来创建菜单，但我有问题使其可折叠。我无法弄清楚如何动态地将新创建的菜单标题ID传递给每个创建的菜单标题的onmousevent属性。

我试过了：

uList.onmouseover = display(ulist.getAttribute('id0)); 
uList.setAttribute('onmouseclick', 'display(this.id)');

其中uList是动态创建的标记，而display是确定菜单是否已折叠的函数

function display(listID)
{
var thisList = listID;
if(thisList.style.display = 'none')
    ( 
        (thisList).style.display = 'block';
    )
}

浏览器一直给我这个错误：

Unable to set property 'display' of undefined or null reference

Answer 1

如果您有ID，则需要调用getElementById()来获取DOM元素：

var thisList = getElementById(listID);

或者，您可以传递元素本身，而不是将ID传递给函数：

uList.setAttribute('onclick', 'display(this)');

最好用更现代的风格来写它：

ulist.addEventListener('click', function() {
    display(this);
});

Answer 2

试试这个，你在if语法中犯了一个错误，它不是使用（）而是{}。

function display(listID)
{
var thisList = listID;
if($('#'+thisList).css('display') == 'none'){
        $('#'+thisList).css('display','block');
    }
}

JavaScript，DOM，创建动态事件

2 个答案: