Комментарии пользователя Kovalsky

Как сделать вывод div внутри другого div?

Kovalsky @lazalu68

Для начала, у вас очень странный алгоритм - у вас зачем-то динамически обновляется контент, который абсолютно точно не поменяется за время просмотра)

Я никого не критикую и верю, что такому странному подходу есть объяснение, но все же если бы это был мой сайт, я бы не ajax'ом тянул описание каждого блока, а в этом же шаблоне выводил весь нужный контент. Мне кажется это логичным.

Старые стили для элементов .team_arrow, .team_description и .round_blocks я бы полностью заместил этими:

...
.team_element .team_arrow {
  display: none;
  position: relative;
  z-index: 2;
  left: calc(50% - 30.5px);
}
.team_description {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 12px -7px #000000;
  width: 100%;
  padding: 20px;
  font-size: 14px;
  color: #333333;
  margin: 0 0 20px;
  z-index: 1;
  position: relative;
  left: -20px;
  display: none;
}
.team_element.active .round_block, .round_block:hover {
  border: 5px solid #c8dc3d;
  border-radius: 115px;
  display: block;
  height: 220px;
  overflow: hidden;
  width: 220px;
  cursor: pointer;
}
.team_element.active .team_arrow,
.team_element.active .team_description {
  display: block;
}
...

А шаблон был бы такой:

<div class="teams_block">
  <script type="text/javascript">
  $(document).ready(function(){
    var team_elements = $('.team_element');

    $('.team_element').on('click', function(){
      team_elements.removeClass('active');
      $( this ).addClass('active');
    });
  });
  </script>
  <?php foreach ($humans as $human){ ?> 
    <div class="team_element" data-id='<?= $human->id ?>'>
      <div class="round_block">
        <img src="/images/<?= $human->image ?>" />
      </div>
      <div class="title"><?= $human->name ?></div>
      <div class="desc"><?= $human->office ?></div>
      <img class="team_arrow" width="61" height="24" src="/img/team_arrow.png" />
      <div class="team_description"><?= $human->description ?></div>  
    </div>
  <?php } ?>
</div>

Чтобы такое сработало, в объекты массива $humans надо добавить еще и description. Т.к. я не имею возможности видеть остальные .php, это остается за вами)

Как видите, в моем варианте шаблона скрипт почти не занимает места, потому что наша маленькая архитектура стала намного более логичной, куча бессмысленных действий из нее выкинуто. Вообще можно было бы js полностью исключить и делать то же самое используя элементы <a> и :focus для них. Но все же существующий вариант более надежен в плане совместимости, хотя бы в отношении планшетиков.

Я хотел также написать решение на основе старого корявого шаблона, но придумывать рациональную реализацию нерационального алгоритма было настолько грустно, что я бросил, извините.

Войдите на сайт