如何关闭所有打开的UL

问题描述

我有一个正在使用手风琴的树状视图，该视图正在运行，但是我想在单击另一项时折叠以前打开的所有项。

例如，在我的jsFiddle中，单击“饮料”将其展开。然后点击“食物”将展开该食物。我希望单击“食物”时“饮料”崩溃，反之亦然。

我尝试在caret类之外添加一个新类，试图删除切换器函数之前的所有caret-down类，但是我不知道如何在单击函数之前调用它。有人可以解释一下如何关闭所有先前的展开项目，然后展开被单击的项目吗？

var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click",function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

ul,#myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.Box {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}

.Box::before {
  content: "\2610";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.check-Box::before {
  content: "\2611";
  color: dodgerblue;
}

.nested {
  display: none;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <span class="caret">Beverages</span>
  <ul class="nested">
    <li>Water</li>
    <li>Coffee</li>
    <li>
      <span class="caret">Tea</span>
      <ul class="nested">
        <li>Black Tea</li>
        <li>White Tea</li>
        <li>
          <span class="caret">Green Tea</span>
          <ul class="nested">
            <li>Sencha</li>
            <li>Gyokuro</li>
            <li>Matcha</li>
            <li>Pi Lo Chun</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</li>
<li>
  <span class="caret">Food</span>
  <ul class="nested">
    <li>Water</li>
    <li>Coffee</li>
    <li>  
      <span class="caret">Tea</span>
      <ul class="nested">
        <li>Black Tea</li>
        <li>White Tea</li>
        <li>
          <span class="caret">Green Tea</span>
          <ul class="nested">
            <li>Sencha</li>
            <li>Gyokuro</li>
            <li>Matcha</li>
            <li>Pi Lo Chun</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</li>

解决方法

要执行此操作，您需要从.caret的父项ul.nested及其兄弟姐妹.caret中删除相关的类，而这些兄弟姐妹是{em>点击。这可以最简单地结合使用jQuery的closest()，children()，,parents()和find()方法来完成。试试这个：

let $carets = $('.caret').on('click',e => {
  let $caret = $(e.target);
  
  // display the clicked item
  $caret.toggleClass('caret-down');
  $caret.closest('li').children('.nested').toggleClass('active');
  
  // hide the rest
  let $parentCarets = $caret.parents('li').children('.caret'); 
  $carets.not($parentCarets).removeClass('caret-down').closest('li').find('.nested').removeClass('active');
});

ul,#myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.box {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}

.box::before {
  content: "\2610";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.check-box::before {
  content: "\2611";
  color: dodgerblue;
}

.nested {
  display: none;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="caret">Beverages</span>
    <ul class="nested">
      <li>Water</li>
      <li>Coffee</li>
      <li>
        <span class="caret">Tea</span>
        <ul class="nested">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li>
            <span class="caret">Green Tea</span>
            <ul class="nested">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <span class="caret">Food</span>
    <ul class="nested">
      <li>Water</li>
      <li>Coffee</li>
      <li>
        <span class="caret">Tea</span>
        <ul class="nested">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li>
            <span class="caret">Green Tea</span>
            <ul class="nested">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>