Question

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

<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问题的答案，但只是让你知道我想用它做些什么。

Answer 1

这个问题非常非常模糊。但我想你正在寻找nth-child（）选择器。

有关详细信息，请参阅文档here。定位您的“移动菜单”ul，并使用nth-child选择其中的li元素。

我的大问题是，为什么你不能改变HTML？如果是Wordpress，您可以修改模板以更改HTML。

Answer 2

你的问题不是很清楚，但如果你想在不使用id的情况下检索元素，首先你可以使用他们的类

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

您也可以使用标签名称

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

您也可以使用querySelectorAll，这与CSS选择器非常相似，并且还返回一个nodeList

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

我希望这会有所帮助

Answer 3

您可以添加一个类并使用Jquery类选择器：$(".class-name")来定位特定的<li>

使用没有ID的javascript定位li

3 个答案: