javascript - 使用没有ID的javascript定位li

我有一个移动导航，看起来像这样

<ul id="mobile-menu" class="menu>
    <li class="normal-link"><a href="blabla">link-1</a></li>
    <li class="dropdown-link"><a href="blabla">link-2</a>
        <ul class="submenu">
            <li class="link-of-dropdown><a href="blabla">blabla</a></li>
            <li class="link-of-dropdown><a href="blabla">blabla</a></li>
            <li class="link-of-dropdown><a href="blabla">blabla</a></li>
        </ul>
    </li>
    <li class="dropdown-link"><a href="blabla">link-3</a>
        <ul class="submenu">
            <li class="link-of-dropdown><a href="blabla">blabla</a></li>
            <li class="link-of-dropdown><a href="blabla">blabla</a></li>
        </ul>
    </li>
    <li class="normal-link"><a href="blabla">link-1</a></li>
 </ul>

我无法更改html / wordpress生成的代码，但是可以添加CSS和javascript。因此，有什么办法让我在下拉链接的旁边获得一个使子菜单释放的图像。如果按下图像，图像将改变。如果再次按下该按钮，它将返回正常图像，并且下拉菜单再次消失？

我主要是在下拉链接上寻找javascript的问题的答案，但是只是您知道我想用它做什么。

最佳答案

您的问题并不十分清楚，但是如果您想在不使用id的情况下检索元素，则可以先使用其类

var myClass = document.getElementsByClassName("classname"); //returns a nodeList like array
myClass[0] //first element with "classname"

You may also use tag names

var divs = document.getElementsByTagName("div");
divs[2] //third "divs"

You may also use querySelectorAll, this works pretty much like CSS selector and also returns a nodeList

var qs = document.querySelectorAll(".class");

我希望这有帮助