Question

我正在学习JavaScript和CSS并陷入某个地方 -

我有三个不同的列表top_menu，submenu3和submenu4，当我点击第3项时，我想要显示子菜单3，当我点击第4项时，我希望子菜单4显示，子菜单3应该消失。我的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++)

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

Answer 2

非优雅的解决方案是在全局范围内声明您的功能：

window.arrow=function(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";
    }

}

}

列表使用CSS和JavaScript

2 个答案: