0

помогите решить проблему, есть выпадающий список с чекбоксами, изначально список скрыт, при нажатии на "Категории", чекбоксы появляются. Цель сделать так, чтобы выбранные чекбоксы оставались видимыми, после скрытия списка и возвращались на свое место после повторного открытия списка. https://08sip.csb.app/

1
  • Local Storage, Cookies, Sessions, DB, etc ... Commented 15 нояб. 2021 в 7:26

1 ответ 1

0

Применяйте 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>

6
  • Можно вырубить через display none, но дело в том, как сё это аннимировать Commented 16 нояб. 2021 в 3:03
  • например jquery animate
    – Sanya H
    Commented 16 нояб. 2021 в 8:32
  • Как это сделать с выборкой элементов? Commented 17 нояб. 2021 в 6:19
  • изучайте на примере
    – Sanya H
    Commented 17 нояб. 2021 в 11:45
  • Sanya H, спасибо за помощь, доработал на основании animate(), теперь все работает как надо Commented 18 нояб. 2021 в 12:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.