使用javascript修改嵌套在div中的html元素
使用javascript修改嵌套在div中的html元素
提问于 2013-08-15 06:31:51
我正在试图更改嵌套在一组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;
}任何帮助都是非常感谢的。解释我做错了什么，而不仅仅是答案，这将是非常有帮助的，因为我喜欢从我的错误中吸取教训。提前谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-08-15 06:43:59
正如克里斯和乔纳森·皮特科拉斯所说。
但是你也可以用jQuery来简化它
$("#list").click(function(){
$('ul').css('display', 'block');
});我会在列表中设置这个CSS，这样用户就可以看到它是可点击的。
#list {
cursor: pointer;
}小提琴在这里，http://jsfiddle.net/uYuST/
Stack Overflow用户
发布于 2013-08-15 06:42:55
我已经用您的案例创建了一个工作的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);那样的话就行了。
Stack Overflow用户
发布于 2013-08-15 06:41:33
在"set“元素中使用getElementsByTagName，但这是mainCat div，而不是subCat div。ul不是这个div的子代。
另外，您不需要this.id部分。
我更改了代码，所以subCat是一个id。(也许你想让subCat是mainCat的孩子？如果是这样的话，那么在单词List旁边还有一个额外的List)
下面是一个固定的示例：http://jsfiddle.net/4ndEf/
联署材料：
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18247453
复制相关文章
相似问题
腾讯云开发者
