Как работает slideToggle с начальной загрузкой?

Question

Итак, я создаю страницу, где мне нужен список slideToggle с примерно пятью элементами внутри, и я не уверен, что делать дальше. Для этого проекта я попытался использовать Bootstrap и JQuery

Ниже весь мой код:

$(document).ready(function() {
  $(".list").click(function() {
    $(".item").slideToggle("fast");
  });
});

body {
  background-color: #252525;
  font-family: 'roboto';
  width: 90%;
}

#container {
  padding-top: 2%;
  padding-left: 1%;
}

.list {
  color: white;
  font-size: 30px;
  text-align: center;
  background-color: purple;
  cursor: pointer;
  display: block;
  font-family: 'roboto';
}

.item {
  background-color: purple;
  color: white;
  display: none;
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="row">
    <div class="col-4 col-md-3">
      <div class="list">
        Choose item<i class="icon-down-big"></i>
      </div>
      <div class="item">This should slide down on click on Purple div</div>
      <div class="item">This should slide down on click on Purple div</div>
    </div>
  </div>
</div>

Я думал, что при нажатии <div class="list"> я бы увидел <div class="item">, но, похоже, это не работает. Я пытался изменить классы на id, но это не помогает. У кого-нибудь есть предложения? Я был бы благодарен.

Answer 1

Попробуйте использовать метод slideToggle:

jQuery slideToggle () Метод

Переключение между slideUp () и slideDown () для всех элементов

:

$("button").click(function(){
  $("p").slideToggle();
});

имеет следующие параметры:

скорость

Необязательно.Определяет скорость эффекта слайда.Значение по умолчанию - 400 миллисекунд. Возможные значения:

• миллисекунды
• "медленно"
• "быстро"

замедление

Дополнительно.Определяет скорость элемента в разных точках анимации.Значение по умолчанию: "swing". Возможные значения:

• "swing" - медленнее в начале / конце, но быстрее в середине
• "linear" - движется с постоянной скоростью

Подсказка : дополнительные функции доступны во внешних плагинах

обратный вызов

Дополнительно.Функция, выполняемая после завершения метода slideToggle ()

https://www.w3schools.com/jquery/eff_slidetoggle.asp