Переключить div в зависимости от значения флажка - с анимацией
У меня есть флажок, который при нажатии показывает/скрывает содержимое 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>
Если установлен флажок (toggle1), отображается div (details1) и наоборот. Где разместить эффект анимации?
Приятно, что кто-то отредактировал вопрос, а затем проголосовал против, потому что он показывает отсутствие исследований или неясен! Что это за форум? Строка «Я упускаю здесь что-то очевидное» явно пролетела мимо их головы!
Спасибо, Рори, но slideToggle не работает должным образом. Он игнорирует состояние флажка. Хотя переключатель работает, когда вы щелкаете по флажку, когда страница загружается, отображается div, мне нужно, чтобы он был скрыт и отображался только в том случае, если флажок установлен, что является необязательным параметром, передаваемым на страницу при ее загрузке.
Вы правы, slideToggle не совсем так работает. Я добавил для вас ответ с примером, который охватывает ваш вариант использования.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>
toggle-> слайдТоггл ()