Блог

У меня есть treeview, который корректно расширяется вручную. Но мне нужно, чтобы он частично расширялся при загрузке страницы. Какая часть расширяется, будет определяться идентификатором в URL. В моем 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: "2610";
      color: black;
      display: inline-block;
      margin-right: 6px;
    }

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

Вы можете сначала получить li ближайший span тег near, используя .closest() затем use .find() , чтобы получить все ul , но не тот, который после тега span, а затем добавить некоторый класс к другому uls , т.е.: unselect просто чтобы помочь скрыть этот ul.

Затем вы можете получить внешний li тег и использовать :not его, чтобы выбрать все ul , у которых нет unselect класса, и добавить active класс 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: "2610";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

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