Свернуть div не будет загружаться при первом нажатии

Question

Может кто-нибудь помочь мне здесь? div не работает, но когда вы впервые загружаете веб-страницу, мне нужно дважды щелкнуть кнопку, чтобы отобразилось содержимое.

вот скрипка: https://jsfiddle.net/w2yunpb5/1/

function slide() {
  if (parseInt(document.getElementById("sliding").style.maxHeight) === 0) {
    document.getElementById("sliding").style.maxHeight = "1000px";
  } else {
    document.getElementById("sliding").style.maxHeight = "0px";
  }
}

#sliding {
  transition: 0.5s;
  max-height: 0px;
  overflow: hidden;
}

<button onclick="slide();" class="btn btn-primary">READ</button>
<div id="sliding">
  <p>
    What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

Спасибо за помощь

Answer 1

похоже, что при первом клике вы устанавливаете 0px как максимальную высоту. Что вы можете сделать, вместо текущей логики c в вашей функции slide(), вы можете просто переключить класс open, а когда будет применен open, вы можете сделать max-height с помощью отдельного правила CSS посмотрите: https://jsfiddle.net/ady1ntqp/

Answer 2

Используя следующий код, я вижу, что max-height не устанавливается при первом запуске вашей функции:

console.log(document.getElementById("sliding").style.maxHeight);

Если вы измените логику c и проверите 1000px, вы начнете работа в один клик:

if (parseInt(document.getElementById("sliding").style.maxHeight) === 1000) {
    document.getElementById("sliding").style.maxHeight = "0px";
} else {
    document.getElementById("sliding").style.maxHeight = "1000px";
}

Answer 3

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

Чтобы это исправить, вам нужно изменить логи c, чтобы убедиться, что maxHeight имеет значение, а это значение не 0. Попробуйте это:

let sliding = document.getElementById('sliding');

document.querySelector('button').addEventListener('click', function() {
  sliding.style.maxHeight = parseInt(sliding.style.maxHeight, 10) !== 1000 ? '1000px' : '0px';
});

#sliding {
  transition: 0.5s;
  max-height: 0px;
  overflow: hidden;
}

<button class="btn btn-primary">READ</button>
<div id="sliding">
  <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

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

Answer 4

Вы можете увидеть, если maxHeight равно 1000 до его настройки.

Смотрите ниже

function slide() {
  if (parseInt(document.getElementById("sliding").style.maxHeight) != 1000) {
    document.getElementById("sliding").style.maxHeight = "1000px";
  } else {
    document.getElementById("sliding").style.maxHeight = "0px";
  }
}

#sliding {
  transition: 0.5s;
  max-height: 0px;
  overflow: hidden;
}

<button onclick="slide();" class="btn btn-primary">READ</button>
<div id="sliding">
  <p>
    What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

Answer 5

Поскольку стиль элемента не maxheight === 0. Это вычисляемый стиль maxheight 0, что не одно и то же. Вы можете либо присвоить стиль элементу, либо изменить свое состояние, чтобы проверить, является ли максимальная высота 1000. Любой из них будет работать.

function slide() {
  if (parseInt(document.getElementById("sliding").style.maxHeight) === 0) {
    document.getElementById("sliding").style.maxHeight = "1000px";
  } else {
    document.getElementById("sliding").style.maxHeight = "0px";
  }
}

#sliding {
  transition: 0.5s;
  max-height: 0px;
  overflow: hidden;
}

<button onclick="slide();" class="btn btn-primary">READ</button>
<div id="sliding" style="max-height: 0">
  <p>
    What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

Или

function slide() {
  if (parseInt(document.getElementById("sliding").style.maxHeight) !== 1000) {
    document.getElementById("sliding").style.maxHeight = "1000px";
  } else {
    document.getElementById("sliding").style.maxHeight = "0px";
  }
}

#sliding {
  transition: 0.5s;
  max-height: 0px;
  overflow: hidden;
}

<button onclick="slide();" class="btn btn-primary">READ</button>
<div id="sliding">
  <p>
    What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>