Переключение div в зависимости от значения флажка - с анимацией

#javascript #php #html #jquery #css

#javascript #php #HTML #jquery #css

Вопрос:

У меня есть флажок, который при нажатии показывает / скрывает содержимое div с помощью функции jQuery. Мне нужно, чтобы div скользил вниз (расширяя экран), а не просто появлялся.

jQuery:

 <script>
$(function () {
    $('#toggle1').change(function () {                
        $('#details1').toggle(this.checked);
    }).change(); //ensure visible state matches state of checkbox on page load
    });
</script>

Если установлен флажок (переключение1), отображается div (details1) и наоборот.
Куда мне поместить эффект анимации?

1. toggle -> slideToggle()

2. Приятно, что кто-то отредактировал вопрос, а затем проголосовал отрицательно, потому что это показывает отсутствие исследований или неясно! Что это за форум? Строка «Я здесь упускаю что-то очевидное», очевидно, прошла прямо над их головой!

3. Спасибо, Рори, но slideToggle работает не так, как ожидалось. Он игнорирует состояние флажка. Хотя переключение работает, когда вы нажимаете флажок, при загрузке страницы отображается div, мне нужно, чтобы он был скрыт и отображался только в том случае, если флажок установлен — это необязательный параметр, передаваемый на страницу при ее загрузке.

4. Вы правы, slideToggle это не совсем работает таким образом. Я добавил ответ для вас с примером, который охватывает ваш вариант использования.

Ответ №1:

slideToggle работает не так, как ожидалось. Он игнорирует состояние флажка

Это правда, потому slideToggle() что раздражающе не принимает логическое значение точно так toggle() же, как принимает. Таким образом, вам нужно будет проверить состояние флажка и использовать slideDown() и slideUp() отдельно.

Когда страница загружается, отображается div, мне нужно, чтобы он был скрыт и отображался только в том случае, если флажок установлен

В этом случае используйте CSS, чтобы скрыть элементы при загрузке, поскольку это не требует, чтобы страница загружалась первой, как это делает JS. Если вы хотите показать содержимое при загрузке без использования анимации слайдов show() .

Вот полный рабочий пример:

 jQuery($ => {
  let $toggle =$('#toggle1').change(e => {    
    $('#details1')[e.target.checked ? 'slideDown' : 'slideUp']();
  })
  
  if ($toggle.is(':checked'))
    $('#details1').show();
});

 #details1 {
  display: none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="toggle1" checked />
<div id="details1">Lorem ipsum dolor sit consectetur adipiscing elit</div>

Развернуть фрагмент