Question

正如标题所说，如果父项导航项的子项在'is-active'中具有'active'类，我将尝试给该项导航项一个vanillaJS类。我知道如何在jQuery中进行操作，但是我不想在以后的项目中添加它们。

我已经设法创建了一个基本的jsfiddle-http://jsfiddle.net/1k9su6vo/-可以按照我的预期工作，但是我认为当我开始为nav添加更多复杂性时，这有点太基础了。 / p>

是否有像jQuery，.find()，.closest()等但使用js那样遍历导航的简单方法？

if (document.querySelector('.active')) {
   document.querySelector('.active').parentNode.parentNode.parentNode.classList.add('is-active');
}

Answer 1

现代浏览器实际上支持.closest（）方法参见Mozilla developer site

Answer 2

有没有一种简单的方法可以像jQuery那样遍历导航 .find（）、. closest（）等但带有js？

是的。 The Element.closest()方法。

对于您而言，您想在根列表的直接列表项上添加is-active类。

为了使事情变得容易，您可以在根目录中添加一个类，例如：.wpr，以使从根目录开始的即时列表项更易于定位：

document.querySelector('.active').closest('.wpr > li').classList.add('is-active');

if (document.querySelector('.active')) {
  document.querySelector('.active').closest('.wpr > li').classList.add('is-active'); 
}

.is-active > a {
  color: green;
}

li {
  color: black;
}

.active {
  color: green;
}

<ul class="wpr">
  <li><a href="">test</a></li>
  <li><a href="">test2</a>
    <ul>
      <li><a href="">sub1</a></li>
      <li><a class="active" href="#">sub2</a></li>
      <li><a href="">sub3</a></li>
    </ul>
  </li>
  <li><a href="">test3</a></li>
</ul>

Answer 3

要检查子级node是否包含特定的className，我们可以使用

.classList.contains('active');返回布尔值。

工作示例：

if (document.querySelector('.active')) {
   document.querySelector('.active').parentNode.parentNode.parentNode.classList.add('is-active');
}

const node = document.querySelector('.child');
const parentNode = node.parentNode;
const trigger = document.getElementById('trigger');
trigger.addEventListener('click', function() {
  const hasActiveClass = node.classList.contains('active');

  if (hasActiveClass) {
    parentNode.classList.add('active');
  }
})

.active {
  color: red;
}

<div class="parent">
  I am parent
  <div class="child active"> I am child</div>
</div>

<button id="trigger" type="button">trigger active</button>

如果孩子有一个活跃的班级，那么也给父母一个活跃的班级-Vanilla JS

3 个答案: