Сворачивание структуры

187
11 сентября 2018, 15:20

Написал вот такое дерево, но как в самом низу убрать горизонтальную линию не могу понять + подскажите, как можно сделать сворачивание- разворачивание уровня, например как на фото?

Вот такой у меня вывод:

function build_tree($cats,$parent_id){
    if(is_array($cats) and count($cats[$parent_id])>0){
        $tree = '<div class="item-children">';
        $count = 0;
         foreach($cats[$parent_id] as $cat){
            $count = $count + 1;
            $tree .= '<div class="item-child">
                        <div class="item">
                            <div class="item-parent">
                                <div class="item-data">
                                    <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt="">
                                    <div class="span">'.$cat['user_id'].'lj - '.$count.'</div>
                                </div>
                            </div>';
            $tree .=  build_tree($cats,$cat['id']);
            $tree .= '
            </div>
                </div>
            ';         
         }
         $tree .= '</div>';
     } 
     else return null;          
     return $tree; 
}
echo build_tree($cats,2);

.struct-data{ 
  display: flex; 
} 
.item-level{ 
  width: 90%; 
    display: flex; 
    flex-direction: column; 
    margin: auto; 
} 
.item-level .item-parent { 
    margin-bottom: 50px; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
} 
.item-level .item-parent .item-data{ 
        text-align: center; 
        position: relative; 
        display: block; 
        cursor: pointer; 
        width: max-content; 
} 
.item-level .item-parent .item-data .span { 
    white-space: nowrap; 
    background-color: #00a65a; 
    padding: 5px 10px; 
    border-radius: 5px; 
    font-size: 12px; 
    font-weight: normal; 
    color: #fff; 
    margin: 0; 
    position: relative; 
} 
.item-level .item-parent .item-data > img { 
    height: 50px; 
    border: 5px solid #00a65a; 
    border-radius: 50%; 
    overflow: hidden; 
    background-color: #00a65a; 
} 
.item-level .item-parent .item-data .span:before { 
    content: ''; 
    position: absolute; 
    width: 2px; 
    height: 8px; 
    background-color: #00a65a; 
    left: 50%; 
    top: 4px; 
    transform: translateY(-100%); 
} 
.item-level .item-parent .item-data .span:after { 
    position: absolute; 
    content: ''; 
    width: 2px; 
    bottom: 0; 
    left: 50%; 
    background-color: #00a65a; 
    transform: translateY(100%); 
} 
.item-level .item-parent .item-data .span::after { 
    height: 25px; 
} 
.item-children { 
    display: flex; 
    justify-content: center; 
} 
.item-child { 
    padding: 0 15px; 
    position: relative; 
} 
 
.item-child:after,.item-child:before { 
    content: ''; 
    position: absolute; 
    background-color: #00a65a; 
    left: 0; 
} 
.item-child:before { 
    left: 50%; 
    top: 0; 
    transform: translateY(-100%); 
    width: 2px; 
    height: 25px; 
} 
.item-child:last-child:after { 
    width: calc(50% + 1px); 
} 
.item-child:first-child:after { 
    left: 50%; 
    width: 50%; 
} 
.item-child:after { 
    top: -25px; 
    height: 2px; 
    width: 100%; 
} 
.item{ 
    width: 90%; 
    display: flex; 
    flex-direction: column; 
    margin: auto; 
}
<div class="struct-data"> 
    <div class="item-level"> 
        <div class="item-parent"> 
            <div class="item-data"> 
                <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                <div class="span">Логин</div> 
            </div> 
        </div> 
        <div class="item-children"> 
            <div class="item-child"> 
                <div class="item"> 
                    <div class="item-parent"> 
                        <div class="item-data"> 
                            <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                            <div class="span">Логин</div> 
                        </div> 
                    </div> 
                    <div class="item-children"> 
                        <div class="item-child"> 
                            <div class="item"> 
                                <div class="item-parent"> 
                                    <div class="item-data"> 
                                        <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                        <div class="span">Логин</div> 
                                    </div> 
                                </div> 
                                <div class="item-children"> 
                                    <div class="item-child"> 
                                        <div class="item"> 
                                            <div class="item-parent"> 
                                                <div class="item-data"> 
                                                    <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                                    <div class="span">Логин</div> 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </div> 
                                    <div class="item-child"> 
                                        <div class="item"> 
                                            <div class="item-parent"> 
                                                <div class="item-data"> 
                                                    <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                                    <div class="span">Логин</div> 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                        <div class="item-child"> 
                            <div class="item"> 
                                <div class="item-parent"> 
                                    <div class="item-data"> 
                                        <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                        <div class="span">Логин</div> 
                                    </div> 
                                </div> 
                                <div class="item-children"> 
                                    <div class="item-child"> 
                                        <div class="item"> 
                                            <div class="item-parent"> 
                                                <div class="item-data"> 
                                                    <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                                    <div class="span">Логин</div> 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </div> 
                                    <div class="item-child"> 
                                        <div class="item"> 
                                            <div class="item-parent"> 
                                                <div class="item-data"> 
                                                    <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                                    <div class="span">Логин</div> 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            <div class="item-child"> 
                <div class="item"> 
                    <div class="item-parent"> 
                        <div class="item-data"> 
                            <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                            <div class="span">Логин</div> 
                        </div> 
                    </div> 
                    <div class="item-children"> 
                        <div class="item-child"> 
                            <div class="item"> 
                                <div class="item-parent"> 
                                    <div class="item-data"> 
                                        <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                        <div class="span">Логин</div> 
                                    </div> 
                                </div> 
                                <div class="item-children"> 
                                    <div class="item-child"> 
                                        <div class="item"> 
                                            <div class="item-parent"> 
                                                <div class="item-data"> 
                                                    <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                                    <div class="span">Логин</div> 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </div> 
                                    <div class="item-child"> 
                                        <div class="item"> 
                                            <div class="item-parent"> 
                                                <div class="item-data"> 
                                                    <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                                    <div class="span">Логин</div> 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                        <div class="item-child"> 
                            <div class="item"> 
                                <div class="item-parent"> 
                                    <div class="item-data"> 
                                        <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                        <div class="span">Логин</div> 
                                    </div> 
                                </div> 
                                <div class="item-children"> 
                                    <div class="item-child"> 
                                        <div class="item"> 
                                            <div class="item-parent"> 
                                                <div class="item-data"> 
                                                    <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                                    <div class="span">Логин</div> 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </div> 
                                    <div class="item-child"> 
                                        <div class="item"> 
                                            <div class="item-parent"> 
                                                <div class="item-data"> 
                                                    <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                                                    <div class="span">Логин</div> 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
 
</div>

Answer 1

  1. Убрать "хвост" у последних "детей" - как вариант, найти всех последних "детей" и добавить им класс: $(".item-child:not(:has(.item-child))").addClass('last');

  2. Сворачивание\разворачивания дерева при наведении или при клике:

      if(!parent.hasClass('on')){
    parent.addClass('on last');
  }else {
    parent.removeClass('on last');
  }

  3. Горизонтальный скролл будет добавляться вместе с элементами, потому как flex-wrap: wrap; запрещает перенос, блоки по ширине не влазят в ширину экрана.

На Вашем примере:

$(".item-child:not(:has(.item-child))").addClass('last'); 
 
$('.item-parent>.item-data').on('click', function(){ 
  var $this = $(this), 
      parent = $this.closest('.item'), 
      ch = parent.find('.item-children'); 
   
   
  if(!parent.hasClass('last')){ 
    parent.addClass('last'); 
    ch.slideUp(); 
  } else { 
    parent.removeClass('last'); 
    ch.slideDown(); 
  } 
});
* {box-sizing: border-box;} 
 
html, body {padding: 0; margin: 0;} 
 
 
.struct-data{ 
  display: flex; 
} 
.item-level{ 
  width: 90%; 
  display: flex; 
  flex-direction: column; 
  margin: auto; 
} 
.item-level .item-parent { 
  margin-bottom: 50px; 
  position: relative; 
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap; 
} 
.item-level .item-parent .item-data{ 
  text-align: center; 
  position: relative; 
  display: block; 
  cursor: pointer; 
  width: max-content; 
} 
.item-level .item-parent .item-data .span { 
  white-space: nowrap; 
  background-color: #00a65a; 
  padding: 5px 10px; 
  border-radius: 5px; 
  font-size: 12px; 
  font-weight: normal; 
  color: #fff; 
  margin: 0; 
  position: relative; 
} 
.item-level .item-parent .item-data > img { 
  height: 50px; 
  border: 5px solid #00a65a; 
  border-radius: 50%; 
  overflow: hidden; 
  background-color: #00a65a; 
} 
.item-level .item-parent .item-data .span:before { 
  content: ''; 
  position: absolute; 
  width: 2px; 
  height: 8px; 
  background-color: #00a65a; 
  left: 50%; 
  top: 4px; 
  transform: translateY(-100%); 
} 
.item-level .item-parent .item-data .span:after { 
  position: absolute; 
  content: ''; 
  width: 2px; 
  bottom: 0; 
  left: 50%; 
  background-color: #00a65a; 
  transform: translateY(100%); 
} 
.item-level .item-parent .item-data .span::after { 
  height: 25px; 
} 
.item-children { 
  display: flex; 
  justify-content: center; 
} 
.item-child { 
  padding: 0 15px; 
  position: relative; 
} 
 
.item-child:after,.item-child:before { 
  content: ''; 
  position: absolute; 
  background-color: #00a65a; 
  left: 0; 
} 
.item-child:before { 
  left: 50%; 
  top: 0; 
  transform: translateY(-100%); 
  width: 2px; 
  height: 25px; 
} 
.item-child:last-child:after { 
  width: calc(50% + 1px); 
} 
.item-child:first-child:after { 
  left: 50%; 
  width: 50%; 
} 
.item-child:after { 
  top: -25px; 
  height: 2px; 
  width: 100%; 
} 
.item{ 
  width: 90%; 
  display: flex; 
  flex-direction: column; 
  margin: auto; 
} 
 
 
 
 
.last .span:after { 
  content: none !important; 
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
   
  <div class="struct-data"> 
    <div class="item item-level"> 
      <div class="item-parent"> 
        <div class="item-data"> 
          <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
          <div class="span">Логин</div> 
        </div> 
      </div> 
      <div class="item-children"> 
        <div class="item-child"> 
          <div class="item"> 
            <div class="item-parent"> 
              <div class="item-data"> 
                <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                <div class="span">Логин</div> 
              </div> 
            </div> 
            <div class="item-children"> 
              <div class="item-child"> 
                <div class="item"> 
                  <div class="item-parent"> 
                    <div class="item-data"> 
                      <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                      <div class="span">Логин</div> 
                    </div> 
                  </div> 
                  <div class="item-children"> 
                    <div class="item-child"> 
                      <div class="item"> 
                        <div class="item-parent"> 
                          <div class="item-data"> 
                            <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                            <div class="span">Логин</div> 
                          </div> 
                        </div> 
                      </div> 
                    </div> 
                    <div class="item-child"> 
                      <div class="item"> 
                        <div class="item-parent"> 
                          <div class="item-data"> 
                            <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                            <div class="span">Логин</div> 
                          </div> 
                        </div> 
                      </div> 
                    </div> 
                  </div> 
                </div> 
              </div> 
              <div class="item-child"> 
                <div class="item"> 
                  <div class="item-parent"> 
                    <div class="item-data"> 
                      <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                      <div class="span">Логин</div> 
                    </div> 
                  </div> 
                  <div class="item-children"> 
                    <div class="item-child"> 
                      <div class="item"> 
                        <div class="item-parent"> 
                          <div class="item-data"> 
                            <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                            <div class="span">Логин</div> 
                          </div> 
                        </div> 
                      </div> 
                    </div> 
                    <div class="item-child"> 
                      <div class="item"> 
                        <div class="item-parent"> 
                          <div class="item-data"> 
                            <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                            <div class="span">Логин</div> 
                          </div> 
                        </div> 
                      </div> 
                    </div> 
                  </div> 
                </div> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div class="item-child"> 
          <div class="item"> 
            <div class="item-parent"> 
              <div class="item-data"> 
                <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                <div class="span">Логин</div> 
              </div> 
            </div> 
            <div class="item-children"> 
              <div class="item-child"> 
                <div class="item"> 
                  <div class="item-parent"> 
                    <div class="item-data"> 
                      <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                      <div class="span">Логин</div> 
                    </div> 
                  </div> 
                  <div class="item-children"> 
                    <div class="item-child"> 
                      <div class="item"> 
                        <div class="item-parent"> 
                          <div class="item-data"> 
                            <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                            <div class="span">Логин</div> 
                          </div> 
                        </div> 
                      </div> 
                    </div> 
                    <div class="item-child"> 
                      <div class="item"> 
                        <div class="item-parent"> 
                          <div class="item-data"> 
                            <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                            <div class="span">Логин</div> 
                          </div> 
                        </div> 
                      </div> 
                    </div> 
                  </div> 
                </div> 
              </div> 
              <div class="item-child"> 
                <div class="item"> 
                  <div class="item-parent"> 
                    <div class="item-data"> 
                      <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                      <div class="span">Логин</div> 
                    </div> 
                  </div> 
                  <div class="item-children"> 
                    <div class="item-child"> 
                      <div class="item"> 
                        <div class="item-parent"> 
                          <div class="item-data"> 
                            <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                            <div class="span">Логин</div> 
                          </div> 
                        </div> 
                      </div> 
                    </div> 
                    <div class="item-child"> 
                      <div class="item"> 
                        <div class="item-parent"> 
                          <div class="item-data"> 
                            <img src="https://storytsa.com/attach/user/images/1490332239.jpg" alt=""> 
                            <div class="span">Логин</div> 
                          </div> 
                        </div> 
                      </div> 
                    </div> 
                  </div> 
                </div> 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
 
  </div>

Мой пример с относительными размерами и упрощенной системой разметки:

$("li:not(:has(li))").addClass('last'); 
 
$('a').on('click', function(e){ 
  e.preventDefault(); 
   
  var $this = $(this), 
      parent = $this.closest('li'), 
      child = parent.find('ul'); 
   
  if(!parent.hasClass('on')){ 
    parent.addClass('on last'); 
  }else { 
    parent.removeClass('on last'); 
  } 
});
* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
ul { 
  list-style-type: none; 
  padding: 0; 
  margin: 0; 
   
  display: flex; 
  flex-flow: row nowrap; 
  align-items: flex-start; 
  align-content: center; 
  justify-content: center; 
} 
 
ul ul li { 
  transform:translateX(-50%); 
} 
 
ul ul li+li { 
  transform:translateX(50%); 
} 
 
li, 
a{ 
  display: flex; 
  flex-flow: column nowrap; 
  align-items: center; 
  align-content: center; 
  justify-content: center; 
} 
 
a { 
  text-decoration: none; 
  font-family: sans-serif; 
  text-transform: uppercase; 
  font-weight: bold; 
  color:#000; 
  position: relative; 
} 
 
.img { 
  width: 5vw; 
  height: 5vw; 
  border-radius: 50%; 
  background: #fff; 
  border: .5vw solid #00a65a; 
  display: block; 
  margin-bottom: 10px; 
  position: relative; 
  z-index: 2; 
  transition: all .2s ease-in-out; 
} 
 
.img:after { 
  content: ''; 
  position: absolute; 
  width: .3vw; 
  background: #00a65a; 
  top: 100%; 
  height: calc(10px + .5vw); 
  z-index: 1; 
  left: 50%; 
  transform:translateX(-50%); 
} 
 
.text { 
  font-size:3vw; 
  background: #00a65a; 
  color:#fff; 
  padding: .5vw 1vw; 
  position: relative; 
  z-index: 2; 
  margin-bottom: 20px; 
  transition: all .2s ease-in-out; 
} 
 
.text:after { 
  content: ''; 
  position: absolute; 
  width: .3vw; 
  background: #00a65a; 
  top: 100%; 
  height: 20px; 
  z-index: 1; 
  left: 50%; 
  transform:translateX(-50%); 
} 
 
ul ul { 
  padding-top: 20px; 
  border-top: .3vw solid #00a65a; 
  position: relative; 
} 
 
ul ul:before, 
ul ul:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  height: 20px; 
  width: .3vw; 
  background: #00a65a; 
} 
 
ul ul:before { 
  left: 0; 
} 
 
ul ul:after { 
  right: 0; 
} 
 
.last .text:after { 
  content: none; 
} 
 
 
ul ul { 
    transition: margin .25s, 
                padding .25s, 
                opacity .5s .25s; 
} 
 
 
.on ul { 
  font-size: 0; 
    margin: 0; 
    opacity: 0; 
    padding: 0; 
    transition: opacity .25s, 
                margin .5s .25s, 
                padding .5s .25s; 
   
     
} 
 
/* a:not(:hover) ~ ul { 
    transition: margin .25s, 
                padding .25s, 
                opacity .5s .25s; 
} 
 
 
a:hover ~ ul { 
  font-size: 0; 
    margin: 0; 
    opacity: 0; 
    padding: 0; 
    transition: opacity .25s, 
                margin .5s .25s, 
                padding .5s .25s; 
   
     
} */
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
   
  <ul> 
    <li> 
      <a href="#"> 
        <span class="img"></span> 
        <span class="text">Top</span> 
      </a> 
       
      <ul> 
        <li> 
          <a href="#"> 
            <span class="img"></span> 
            <span class="text">1</span> 
          </a> 
           
          <ul> 
            <li> 
              <a href="#"> 
                <span class="img"></span> 
                <span class="text">2</span> 
              </a> 
               
              <ul> 
                <li> 
                  <a href="#"> 
                    <span class="img"></span> 
                    <span class="text">3</span> 
                  </a> 
                </li> 
 
                <li> 
                  <a href="#"> 
                    <span class="img"></span> 
                    <span class="text">3</span> 
                  </a> 
                </li> 
              </ul> 
            </li> 
 
            <li> 
              <a href="#"> 
                <span class="img"></span> 
                <span class="text">2</span> 
              </a> 
               
              <ul> 
                <li> 
                  <a href="#"> 
                    <span class="img"></span> 
                    <span class="text">3</span> 
                  </a> 
                </li> 
 
                <li> 
                  <a href="#"> 
                    <span class="img"></span> 
                    <span class="text">3</span> 
                  </a> 
                </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
         
        <li> 
          <a href="#"> 
            <span class="img"></span> 
            <span class="text">1</span> 
          </a> 
           
          <ul> 
            <li> 
              <a href="#"> 
                <span class="img"></span> 
                <span class="text">2</span> 
              </a> 
               
              <ul> 
                <li> 
                  <a href="#"> 
                    <span class="img"></span> 
                    <span class="text">3</span> 
                  </a> 
                </li> 
 
                <li> 
                  <a href="#"> 
                    <span class="img"></span> 
                    <span class="text">3</span> 
                  </a> 
                </li> 
              </ul> 
            </li> 
 
            <li> 
              <a href="#"> 
                <span class="img"></span> 
                <span class="text">2</span> 
              </a> 
               
              <ul> 
                <li> 
                  <a href="#"> 
                    <span class="img"></span> 
                    <span class="text">3</span> 
                  </a> 
                </li> 
 
                <li> 
                  <a href="#"> 
                    <span class="img"></span> 
                    <span class="text">3</span> 
                  </a> 
                </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </li> 
  </ul>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте web-king.com.ua
ТОП-10
READ ALSO
есть ли способ определить наличие fatal error в js
jQuery

есть ли способ определить наличие fatal error в js

Существует ли способ определить есть ли какие нибудь ошибки в выполнении js кода, не именно по конкретной функции или переменной а в целом

 191
Пропадают всплывающие подсказки Chart.js
jQuery

Пропадают всплывающие подсказки Chart.js

Столкнулся с такой проблемойЕсть 2 графика на Chart js, 1 из них линейный с ним всё в порядке, 2-й столбчатый у обоих графиков ось X типом time

 233
Поиск слова в массиве
jQuery

Поиск слова в массиве

Допустим есть переменная

 183
jQuery на scroll к элементу
jQuery

jQuery на scroll к элементу

В общем у меня есть обычный bootstrap progress bar

 203