Javascript：从点击目标的同级和子级中删除类

Question

我正在尝试构建类似于 OS X Finder 的东西。从顶级列表中选择一个元素，并向其添加类以设置样式并显示子列表，然后选择子列表的一个元素。我有这个工作。问题是当单击同级项时，从顶级项目中删除“活动”类。此外，当单击顶级项目时，从任何子列表项目中删除“活动”。

本质上：如何选择单击事件目标的所有同级，以及如何选择单击事件目标的所有子级。

我知道这对于 jquery 来说很容易，但我无法在这个项目上使用 jquery。

这是我到目前为止所拥有的：

var allThings = document.querySelectorAll('.thing'); //all tabs on page

function clickHandler(e) {
	e.preventDefault();
	//var siblings = getSiblings(e.target);
  //console.log("siblings = " + siblings);
  //for (var i = 0; i < siblings.length; i++) {
    //siblings[i].classList.remove("active");
  //}
  //e.target.nextSibling.classList.remove("active");
  //e.target.previousSibling.classList.remove("active");
	e.target.classList.toggle("active");
};

function getSiblings(el, filter) {
  var siblings = [];
  el = el.parentNode.firstChild;
  do { if (!filter || filter(el)) siblings.push(el); } 						while (el = el.nextSibling);
  return siblings;
}

for (var i = 0; i < allThings.length; i++) {
    allThings[i].onclick = clickHandler;
    //allThings[i].children.classList.remove("active");
}

ul {
  display: inline-block;
  vertical-align: top;
}

.thing {
  position: relative;
  background: white;
}

.thing ul {
  display: none;
}

.thing.active {
  background: #ddd;
}

.thing.active > ul {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 100%;
}

<ul>
  <li class="thing">First 001
    <ul>
      <li class="thing">Second 001
        <ul>
          <li class="thing">Third 001</li>
          <li class="thing">Third 002</li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="thing">First 002
    <ul>
      <li class="thing">Second 002
        <ul>
          <li class="thing">Third 011</li>
          <li class="thing">Third 012</li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="thing">First 003
    <ul>
      <li class="thing">Second 031
        <ul>
          <li class="thing">Third 031</li>
          <li class="thing">Third 032</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

https://jsfiddle.net/samhadr/ym2Lx7sn/6/

Answer 1

点击事件应该做两件事：

1. active从所有兄弟元素和后代元素中删除类。
2. 将类添加active到单击的元素。

querySelectorAll可以帮助完成第 1 部分，而第 2 部分则非常直接：

function clickHandler( e ) {

    e.preventDefault();

    e.target.parentElement.querySelectorAll( ".active" ).forEach( e =>
        e.classList.remove( "active" ) );

    e.target.classList.add( "active" );

};