Переключить, чтобы развернуть div (несколько) - PullRequest
Новая
       6

Переключить, чтобы развернуть div (несколько)

0 голосов
/ 05 апреля 2019

В настоящее время я использую этот метод jQuery, в котором элементы div имеют ограниченный размер, но после щелчка развернутся до размера текста: 

document.getElementById("toggle").onclick = function(e) {
  e.preventDefault();
  var s = document.getElementById("expandable").style;
  if (s.height)
    s.height = "";
  else
    s.height = "auto";

}
#expandable {
  width: 20em;
  height: 60px;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
<pre><code><p id="expandable">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a id="toggle">more</a>

http://jsfiddle.net/TbdgL/

Однако у меня возникают проблемы при попытке получить списоквсе строки div для расширения.Я думаю, что мне нужно адаптировать его так, чтобы и «расширяемые», и «переключатели» становились классами, но я не могу заставить его работать.Я новичок в этом!

Любая помощь будет отличной.

1 Ответ

0 голосов
/ 05 апреля 2019

Вы правы! Отличным способом написания этой функциональности является использование классов CSS!

Я разбудил твой jsfiddle с новой имплантацией здесь .

По сути, вы можете проверить, есть ли у элемента класс expanded, если класс присутствует в элементе, затем удалите его, иначе добавьте его!

Класс expanded просто устанавливает height элемента в auto.

...