3

Ребят, есть такая вот вёрстка (см. изображение) реализовал при помощи grid. Идея реализации постов, когда пользователь нажимает по посту, то тот разворачивается на всю ширину в том месте, где был изначально, а блоки что рядом, смещаются.

вот так это выглядит на примере

до нажатия до нажатия

после нажатия после нажатия

нажимаем по 5 блоку и тот растягивается на всю ширину. блоки, что рядом смещаются относительно 5 блока.

на другом ресурсе мне помогли и слепили такой вот код (codepen), но он не очень хорошо функционирует. отказывается работать на jquery 2.x.x, похоже, что он нормально робит только на v3.4.1+, что странно, непонятно почему не хочет. скорее всего, это связано с псевдоэлементом before...

если есть идеи, то прошу помощи, спасибо.

и вариант кода на чистом js.

let block = document.querySelector(".block");
let number;

for (let i = 0; i < items.length; i++) {


  items[i].addEventListener('click', (e) => {
    items.forEach(item => item.classList.remove('active'));
    e.target.classList.add('active');
    number = i + 1;

    if (number % 3 == 2) {
      block.style.setProperty('--column', '1/3');
      block.style.setProperty('--display', 'block');
    } else if (number % 3 == 1) {
      block.style.setProperty('--display', 'none');
    } else if (number % 3 == 0) {
      block.style.setProperty('--column', '1/2');
      block.style.setProperty('--display', 'block');
    }

  })

}

если использовать код на чистом js, то всё бы хорошо, но, при нажатии на .item, класс .active привязывается к любому элементу внутри .item. на какой нажал к тому и привяжется)

p.s. ссори, спойлеры тут странно работают, поэтому - полотно.

6
  • "... отказывается работать на jquery 2.x.x" Проверил на 2.0.0 - всё отлично работает.
    – UModeL
    18 мар 2021 в 4:17
  • @UModeL переключите тут на 2.2.4 jsfiddle.net/3ra56o0j ,но сперва посмотрите работу на версии 3.4.1
    – dJoni .D
    18 мар 2021 в 4:30
  • То есть, в первой строке постоянно должен меняться отступ?
    – UModeL
    18 мар 2021 в 4:45
  • @UModeL это как вариант реализации, довольно забавный, правда? но всё же смущает. значения передаются в переменные, тем самым да, заполняется нужное пространство.
    – dJoni .D
    18 мар 2021 в 4:52
  • 1
    в нативном js можешь также обратиться к элементу через this, а не e.target, тогда все норм будет, только не забудь стрелочную функцию убрать
    – kost1k
    18 мар 2021 в 6:46

1 ответ 1

3

Всё-таки JS, лично мне, более понятен. Теперь можете указывать любое количество колонок - логика останется прежней:

let block = document.querySelector(".block");
let items = [...block.querySelectorAll("div.item")];
let cols = getComputedStyle(block).gridTemplateColumns.split(' ').length;
block.addEventListener('click', (ev) => {
  let target = ev.target.closest('.item');
  if (!target) return;
  items.forEach((item) => { item.classList.remove('active'); });
  target.classList.add('active');
  let index = items.indexOf(target);
  block.style.setProperty('--display', (index % cols == 0 ? 'none' : 'block'));
  block.style.setProperty('--column', `1/${(index + 1 == cols) ? 0 : cols - (index % cols) + 1}`);
})
body { margin: 0; }

.block {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
}
.block::before {
  content: '**'; /* стереть звездочки и фон, сейчас для наглядности */
  background: #f003;
  display: var(--display, none);
  grid-column: var(--column, 1/1);
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #000;
  color: #fff;
  font-size: 30px;
}
.active { grid-column: 1/-1; }
<div class="block">

  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6"><span><em><b>6</b></em></span></div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9"><span>9</span></div>
  <div class="item item-10">10</div>
  <div class="item item-11">11</div>
  <div class="item item-12">12</div>
  <div class="item item-13">13</div>
  <div class="item item-14">14</div>
  <div class="item item-15">15</div>

</div>

6
  • не совсем понимаю, указать любое количество блок? всё же да, изначально непонятно сколько этих блоков будет на странице, максимальное количество может быть известно. сейчас проверил Ваш код и сперва не понял, почему не робит. при клике ничего не происходит, но потом дошло. та же проблема с target. @kost1k помог решить её путём использования метода this. проблема в том, что код сработает, если нажать на блок .item и только на него, если нажать на его детей, то ничего не будет.
    – dJoni .D
    18 мар 2021 в 15:44
  • 1
    @dJoniD: поправил. Проверяйте.
    – UModeL
    18 мар 2021 в 15:57
  • @Sevastopol: как я понял, вся задумка именно в этом.
    – UModeL
    18 мар 2021 в 16:12
  • @UModeL нус, я ещё добавил прокрутку на jq $('html,body').animate({scrollTop:$('.posyactiv').offset().top+"px"},{duration:1E3}); пусть и не оч нативно, но кода куда меньше. p.s. у меня jq по стандарту, в dle на ней многое завязано. спасибо.
    – dJoni .D
    18 мар 2021 в 16:35
  • 1
    @UModeL дак за меня уже решили, нужно бы её выкосить, но пока не стоит того)
    – dJoni .D
    18 мар 2021 в 16:51

Ваш ответ

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

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