Блог

Главная - Вопросы по программированию - Контейнер с большим количеством содержимого начинается с определенной высоты, увеличивается, чтобы соответствовать содержимому, а затем сжимается при щелчках

Контейнер с большим количеством содержимого начинается с определенной высоты, увеличивается, чтобы соответствовать содержимому, а затем сжимается при щелчках

#javascript #html #css

Вопрос:

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

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

 const hoistingId = document.getElementById('hoisting')

function enlargeBlogItem() {
    if(hoistingId.style.height===''){
        hoistingId.style.height = '3rem';
    } else {
        hoistingId.style.height = '';
    }
}

hoistingId.addEventListener('click', enlargeBlogItem)

Комментарии:

1. Не могли бы вы настроить песочницу, включая свой код ?

Ответ №1:

Вы можете использовать overflow: hidden; родительский элемент, чтобы убедиться, что дочерние элементы находятся внутри родительского элемента и не перекрываются, а затем использовать функцию JavaScript для обработки изменений размера. Атрибут attr-small используется для хранения исходного значения height . Удалив height атрибут из стиля родителя, он по умолчанию обернет дочерние элементы.

 function toggleSize(el){

  const originalSize = el.getAttribute('attr-small');
  
  if(el.style.height === originalSize) {
    el.style.removeProperty('height');
  } else {
    el.style.height = originalSize;
  }
} 
 #container {
  border: 1px solid;
  width: 200px;
  overflow: hidden;
}

#container:hover {
  cursor: pointer;
}

.foo {
  width: 90px;
  height: 90px;
  background-color: red;
  display: inline-block;
  margin-left: 5px;
  margin-top: 5px;
} 
 <div id='container' onclick='toggleSize(this)' attr-small='48px' style='height:48px;'>
  <div class='foo'></div>
  <div class='foo'></div>
  <div class='foo'></div>
  <div class='foo'></div>
  <div class='foo'></div>
  <div class='foo'></div>
</div>
Метки: , , ,