は私ではなく、一つのアイテムのすべてのリスト項目を表示したい

<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は一意である必要があります。代わりにクラスを使用してください。 – z0mBi3

idをclassに置き換え、それに応じて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

ええ、それはそれです –

は私ではなく、一つのアイテムのすべてのリスト項目を表示したい

答えて

関連する問題