изменить расположение сетки при событии клика - PullRequest
Новая
       6

изменить расположение сетки при событии клика

1 голос
/ 18 апреля 2019

Можно ли изменить макет сетки при событии щелчка?У меня есть сетка, отображающая три строки, и я хочу, чтобы сетка изменялась на три столбца при нажатии на элемент в строке. 

.gridcontainer {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-content: center;
}

.gridcontainer {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  justify-content: center;
}
<div class="gridcontainer">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

При событии щелчка по любому из элементов я хочу, чтобы отображение сетки изменялось с трех строк на три столбца.

Ответы [ 3 ]

2 голосов
/ 18 апреля 2019

Сделайте два отдельных класса: 

.row {
  grid-template-rows: 1fr 1fr 1fr;
}

.col {
  grid-template-columns: 1fr 4fr 1fr;
}

Переключать каждый класс на .gridcontainer при каждом нажатии. Подробности прокомментированы в демоверсии. 

// Reference the .gridcontainer
var grid = document.querySelector('.gridcontainer');

// Register click event to grid callback rowCol runs on click
grid.onclick = rowCol;

/* 
Callback function rowCol() passes the Event Object...
if the clicked element (e.target) .matches() class .item...
get the clicked element's (ie .item) .closest() element .gridcontainer and 
add/remove class .col or .row
*/
function rowCol(e) {
  if (e.target.matches('.item')) {
    e.target.closest('.gridcontainer').classList.toggle('row');
    e.target.closest('.gridcontainer').classList.toggle('col');
  }
  return false;
}
.gridcontainer {
  display: grid;
  justify-content: center;
}

.row {
  grid-template-rows: 1fr 1fr 1fr;
}

.col {
  grid-template-columns: 1fr 4fr 1fr;
}
<div class="gridcontainer row">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>
0 голосов
/ 18 апреля 2019

Облако попробуйте этот чистый JS 

let gridContainer = document.querySelector('.gridContainer')
gridContainer.addEventListener("click", function(){
gridContainer.classList.toggle("style_for_row"); // if active its put to off
gridContainer.classList.toggle("style_for_colomn");// and if off put to on
});  //so on every click your changing the className

В CSS вы можете иметь два класса 

style_for_row{grid-template-rows: 1fr 1fr 1fr;}
style_for_column{grid-template-columns: 1fr 1fr 1fr;}
.gridcontainer {
 display: grid;
 justify-content: center;}

, и HTML будет выглядеть как 

<div class="gridcontainer style_for_column">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div></div>
0 голосов
/ 18 апреля 2019

если вы спросите о том, как событие может выглядеть, вы можете увидеть это: 

$( "#grid" ).on( "click", function() {
  $( this ).css( "grid-template-columns", "1fr 4fr 1fr" );
});

, и вы можете посмотреть на этот ответ

...