1

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

введите сюда описание изображения

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

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>

6
  • Вы это руками генерите или автоматически скриптом?
    – ThisMan
    17 июл 2018 в 10:35
  • пока сверстал, хочу вставить в цикл
    – Aslero
    17 июл 2018 в 10:36
  • если вы цикл напишете, то вы и на свой вопрос ответите)
    – ThisMan
    17 июл 2018 в 10:37
  • хотя тут больше рекурсия подойдет
    – ThisMan
    17 июл 2018 в 10:37
  • вывод то я сделал
    – Aslero
    17 июл 2018 в 10:49

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.