javascript - 使用 CSS 和 JavaScript 的列表

Question

我正在学习 JavaScript 和 CSS，但在某个地方遇到了困难-

我有三个不同的列表 top_menu、submenu3 和 submenu4，当我单击第 3 项时，我希望显示子菜单 3，当我单击第 4 项时，我希望显示 submenu4，而 submenu3 应该消失。我的 HTML 代码是-

<ul id="top_menu">
    <li onclick="arrow(1)"><a href="#">item no 1</a>
    </li>
    <li onclick="arrow(2)"><a href="#">item no 2</a> 
    </li>
    <li onclick="arrow(3)"><a href="#">item no 3</a>
    </li>
    <li onclick="arrow(4)"><a href="#">item no 4</a>
    </li>

</ul>
<ul id="submenu1" style="display:none;"></ul>
<ul id="submenu2" style="display:none;"></ul>
<ul id="submenu3" style="display:none;">
    <li><a href="#">A3</a>
    </li>
    <li><a href="#">B3</a>
    </li>
    <li><a href="#">C3</a>
    </li>
    <li><a href="#">D3</a>
    </li>
    <li><a href="#">E3</a>
    </li>
</ul>
<ul id="submenu4" style="display:none;">
    <li><a href="#">A4</a>
    </li>
    <li><a href="#">B4</a>
    </li>
    <li><a href="#">C4</a>
    </li>
    <li><a href="#">D4</a>
    </li>
    <li><a href="#">E4</a>
    </li>
</ul>

函数 arrow() 的 JavaScript 实现是函数箭头(x){

    for (i = 1; i <5; i++) {

        if (i==x) {
            document.getElementById("submenu"+i).style.display = "block";
        }

        else {
         document.getElementById("submenu"+i).style.display = "none";
        }

    }
}

谁能告诉我错误在哪里？谢谢!

Answer 1

for语句应该是

for (i = 1; i <5; i++)

除此之外，它似乎对我有用。