我想说明,而不是一个项目的所有列表项
问题描述:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mango.css">
<script>
function mango(){
document.getElementById("apple").style.display="block";
}
</script>
</head>
<body>
</body>
<ul id="main" onclick="mango()">main1
<li id="apple">sub1</li>
<li id="apple">sub2</li>
<li id="apple">sub3</li>
</ul>
<ul id="main">main2
<li>sub11</li>
<li>sub2</li>
<li>sub11</li>
</ul>
</html>
相关的CSS:我想说明,而不是一个项目的所有列表项
#main li{
list-style-type: none;
display: none;
}
在给定的程序
,当我点击MAIN1其上显示的第一个列表项,而不是,我想显示所有列表项下你可以帮我吗?
答
我已经用class替换id并相应地更改了js。使用具有相同值的多个ID将导致不良行为,具体取决于浏览器
<html>
<head>
<link rel="stylesheet" type="text/css" href="mango.css">
<script>
function mango(){
document.querySelectorAll(".apple")
.forEach(function(node){
node.style.display="block";
})
}
</script>
</head>
<body>
</body>
<ul id="main" onclick="mango()">main1
<li class="apple">sub1</li>
<li class="apple">sub2</li>
<li class="apple">sub3</li>
</ul>
<ul id="main">main2
<li>sub11</li>
<li>sub2</li>
<li>sub11</li>
</ul>
</html>
+0
是的..就是这样 –
您不能使用重复的ID。 Id需要独一无二。改为使用class。 – z0mBi3