Question

<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时，而不是我想显示那个下面的所有列表项。你能帮帮我吗？

Answer 1

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

我想显示所有列表项而不是一个项

1 个答案: