我想说明，而不是一个项目的所有列表项

<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其上显示的第一个列表项，而不是，我想显示所有列表项下你可以帮我吗？

来源

2016-08-17 Dream Hunter

您不能使用重复的ID。 Id需要独一无二。改为使用class。 – z0mBi3

我已经用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>

来源

2016-08-17 06:17:24 z0mBi3

是的..就是这样 –

我想说明，而不是一个项目的所有列表项

回答

相关问题