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的孩子？如果是这种情况，您在单词</div>旁边有一个额外的List

以下是一个固定示例：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/

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

3 个答案: