помогите решить проблему, есть выпадающий список с чекбоксами, изначально список скрыт, при нажатии на "Категории", чекбоксы появляются. Цель сделать так, чтобы выбранные чекбоксы оставались видимыми, после скрытия списка и возвращались на свое место после повторного открытия списка. https://08sip.csb.app/
1 ответ
Применяйте display:none
не списку, а элементам списка, которые не содержат отмеченных input
// вариант 1
/*$('.publications-select__header').click(function() {
$('.publications-select__list-collapsed input:checkbox:not(:checked)')
.parent('.publications-select__item')
.toggle('slow');
});*/
// вариант 2
$('.publications-select__header').click(function() {
$('.publications-select__list-collapsed input:checkbox:not(:checked)')
.parent('.publications-select__item')
.animate({
height: 'toggle',
opacity: 'toggle'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<!--publications-->
<div class="container-publications container">
<div class="publications">
<h2 class="publications-header section-header">Издания</h2>
<div class="publications-select">
<h3 class="publications-select__header">Категории</h3>
<ul class="publications-select__list-collapsed active">
<li class="publications-select__item">
<input type="checkbox" id="bestsellers" class="publications-select__input">
<label for="bestsellers" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Бестселлеры</label>
<span class="publications-select__span_close"></span>
</li>
<li class="publications-select__item">
<input type="checkbox" id="art" class="publications-select__input"><label for="art" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Искусство</label>
<span class="publications-select__span_close"></span>
</li>
<li class="publications-select__item">
<input type="checkbox" id="architecture" class="publications-select__input"><label for="architecture" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Архитектура</label>
<span class="publications-select__span_close"></span>
</li>
<li class="publications-select__item">
<input type="checkbox" id="design" class="publications-select__input">
<label for="design" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Дизайн
</label>
<span class="publications-select__span_close"></span>
</li>
<li class="publications-select__item">
<input type="checkbox" id="fashion" class="publications-select__input">
<label for="fashion" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Мода
</label>
<span class="publications-select__span_close"></span>
</li>
<li class="publications-select__item">
<input type="checkbox" id="for-children" class="publications-select__input">
<label for="for-children" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Детям
</label>
<span class="publications-select__span_close"></span>
</li>
<li class="publications-select__item">
<input type="checkbox" id="fiction" class="publications-select__input">
<label for="fiction" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Художественная литература
</label>
<span class="publications-select__span_close"></span>
</li>
<li class="publications-select__item">
<input type="checkbox" id="journalism" class="publications-select__input"><label for="journalism" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Публицистика
</label>
<span class="publications-select__span_close"></span>
</li>
<li class="publications-select__item">
<input type="checkbox" id="travel-guides" class="publications-select__input">
<label for="travel-guides" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Путеводители
</label>
<span class="publications-select__span_close"></span>
</li>
<li class="publications-select__item">
<input type="checkbox" id="philosophy" class="publications-select__input">
<label for="philosophy" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Философия
</label>
<span class="publications-select__span_close"></span>
</li>
<li class="publications-select__item">
<input type="checkbox" id="educational-literature" class="publications-select__input">
<label for="educational-literature" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Учебная
литература</label>
<span class="publications-select__span_close"></span>
</li>
<li class="publications-select__item">
<input type="checkbox" id="newspapers" class="publications-select__input">
<label for="newspapers" class="publications-select__label" data-checked="false">
<span class="publications-select__span_box"></span>Журналы и
газеты</label>
<span class="publications-select__span_close"></span>
</li>
</ul>
</div>
<div class="publications-select__warehouse"></div>
</div>
</div>
</section>
-
Можно вырубить через display none, но дело в том, как сё это аннимировать Commented 16 нояб. 2021 в 3:03
-
-
-
-
Sanya H, спасибо за помощь, доработал на основании animate(), теперь все работает как надо Commented 18 нояб. 2021 в 12:47