如何在页面加载时为特定节点扩展树视图

Question

我有一个可以手动正确展开的树视图。但我需要它在页面加载时部分扩展。扩展哪一部分将由url中的ID决定。在我的 jsfiddle 中，我已将 id="xyz" 添加到嵌套部分之一以模拟此操作。因此，当页面加载时，上面的树的整个部分（包括该元素）应该展开，但事实并非如此。有人可以看看吗？

    <style>
    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;
    }
    </style>

    <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" id="xyz">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>

    <script>
     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');
        
      });
      
      $("#xyz").addClass('caret-down');
      let $parentCarets = $("#xyx").parents('li').children('.caret'); 
      $("#xyx").not($parentCarets).addClass('caret-down').closest('li').find('.nested').addClass('active');
     </script>

Answer 1

您可以先使用 .closest() 获取最近的 li 靠近 span 标签，然后使用 .find() 获取所有 ul 但不是后面的标签span 标签，然后将一些 class 添加到其他 uls 即：unselect 只是为了帮助隐藏 ul .

然后，你可以得到外部li标签，并使用:not到select所有ul没有unselectclass 并仅将 active class 添加到那些 uls .

演示代码 :

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');

});

$("#xyz").addClass('caret-down bg');
//get closest li -> not first ul add some class to other
$("#xyz").closest('li').find('ul.nested:not(:first)').addClass("unselect")
//get closest li-> find ul ->show that
$("#xyz").closest('li.outer').find("ul:not(.unselect)").toggleClass('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;
}

.bg {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <!-- added this outer class -->
  <li class="outer"><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" id="xyz">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 class="outer"><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>

如何在页面加载时为特定节点扩展树视图

How to expand treeview for specific node on page load

jquery

treeview

load

expand