我想說明，而不是一個項目的所有列表項

<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

是的..就是這樣 –

我想說明，而不是一個項目的所有列表項

回答

相關問題