如何关闭所有打开的ul

Question

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

例如，在我的 jsFiddle 中，单击 'Beverages' 将展开它。然后单击 'Food' 将展开那个。我希望 'Beverages' 在单击 'Food' 时折叠，反之亦然。

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

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: "10";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.check-box::before {
  content: "11";
  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>

Answer 1

为此，您需要从任何 .caret 及其同级 ul.nested 中删除相关的类，后者不是的父级单击的 .caret。这可以最简单地使用 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: "10";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.check-box::before {
  content: "11";
  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>

如何关闭所有打开的ul

How to close all open ul's

jquery

treeview

collapse