Question

我正在将一些jQuery代码更新为普通JS。目前代码使用jQuery最接近的方法来选择最接近的UL。我需要帮助找到使用javascript选择最接近的UL的正确方法。

以下是HTML代码示例：

<ul class ="m_nav_tier m_nav_tier1">
    <li data-nav-tier="1">
        <a class="m_drop" href="#">Link1</a>
        <ul class="m_nav_tier m_nav_tier2">
             <li>One</li>
             <li>Two</li>
             <li>Three</li>
        </ul>
    </li>
</ul>

我要做的是在用户点击Link 1

时更改<ul class="m_nav_tier m_nav_tier2">的班级

这是我到目前为止所尝试的内容：

var mdrop = document.getElementsByClassName('m_drop');

for (i = 9; i < mdrop.length; i++) {
  //Forward
  mdrop[i].onclick = function () {

  //make tier 1 inactive
  var tier1 = document.getElementsByClassName('m_nav_tier1')[1];
  tier1.className += " inactive";

  //find closest UL and make it active
  document.querySelector('ul .m_nav_tier2')[9].className += " active";
};

Sample Fiddle *更新：我能够使用以下代码更改类：

document.getElementsByClassName('m_nav_tier2')[9].className += " active";

但问题是我必须为数组设置一个值。我尝试放置[i]但是没有用。如何根据选择的LI更新类？

Answer 1

从我所知道的你的课程基于.css，你可以做一个副本，从1改为2，它有什么功能我不会怀疑.js但是我不能看到你告诉JavaScript在哪里收集这个函数（'m_nav_tier1'）以便能够转换为这个 document.querySelector（'ul .m_nav_tier2'）[9] .className + =“active”;

无法选择和更改UL子菜单项的类

1 个答案: