Javascript：从点击目标的兄弟姐妹和孩子中删除课程

Question

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

本质上：如何选择click even目标的所有兄弟节点，以及如何选择click事件目标的所有子节点。

我知道使用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" );

};