使用javascript嵌套在div中的已修改html元素

Question

我正在尝试更改嵌套在一组div中的UL的样式。

这是我所拥有的：

HTML：

<div class='mainCat' id='List' onclick="Expand(this.id);">List</div>
  <div class='subCat'>
  <ul>
  <li>List item one</li>
   <li>List item two</li>
  <li>List item three</li>
</ul>
 </div>
</div>

和Javascript：

function Expand(set)
 {
  var whichSet = document.getElementById(set);
  whichSet.getElementsByTagName('ul')[0].style.display = 'block';
 }

和CSS：

 .subCat ul    
  {
  display:none;
  }

任何帮助深表感谢。 我想从错误中学习，对我正在做错的事情（而不只是答案）做出的解释将非常有帮助。 提前致谢。

Answer 1

我已经根据您的情况创建了一个可工作的JSFiddle 。

您的DOM结构不正确。 您在List元素之前有一个div结束标签。 您应该删除它。

此外，我不会使用内联事件，因为这是一种不好的做法。 我将其移至addEventListener函数，该函数可拆分Javascript事件的更好DOM结构

因此，您的代码变为：

<div class='mainCat' id='List'>
    List
    <div class='subCat'>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
     </div>
</div>

并将以下内容添加到您的Javascript中：

document.getElementById("List").addEventListener("click", function(e) {
    Expand(this.id);
}, true);

那应该可以了。

Answer 2

您正在“ set”元素内使用getElementsByTagName ，但这是mainCat div，而不是subCat div。 ul不是该div的子级。

另外，您不需要this.id部分。

我更改了代码，所以subCat代替了id。 （也许您打算让subCat是mainCat ？如果是这种情况，在List一词旁边会有一个</div> ）

这是一个固定的示例： http : //jsfiddle.net/4ndEf/

JS：

function Expand(set) {
    var whichSet = document.getElementById(set);
    whichSet.getElementsByTagName('ul')[0].style.display = 'block';
}

HTML：

<div class='mainCat' id='List' onclick="Expand('subCat');">List</div>
<div id='subCat'>
    <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
    </ul>
</div>

CSS：

 #subCat ul {
     display:none;
 }

Answer 3

正如克里斯和乔纳森·皮蒂科拉斯所说。

但是您也可以使用jQuery简化它

$("#list").click(function(){
    $('ul').css('display', 'block');
});

我将此CSS设置在列表上，以便用户可以看到它是可单击的

#list {
    cursor: pointer;
}

在这里拨弄http://jsfiddle.net/uYuST/