JQuery Показать / Скрыть UL детей и снять флажок других родителей

Я сделаю все возможное, чтобы описать мою проблему. Это сообщество помогло мне раньше, поэтому я надеюсь, что кто-то будет достаточно любезен, чтобы одолжить мне свою помощь еще раз. Я не очень много знаю о JQuery.

Мы настраиваем сайт WordPress с помощью Easy Digital Downloads, из-за чего у нас есть некоторые ограничения, например, невозможность изменить HTML, но мы можем добавить элементы JQuery на страницу.

Это для системы выбора категорий, где пользователь должен иметь возможность выбрать только 1 родительскую категорию и несколько подкатегорий под этим родителем.

Я ищу решение JQuery для следующего сценария.

У нас есть 5, потенциально 6, "категорий". Эти категории имеют подкатегории, представленные UL. По умолчанию подкатегории должны быть скрыты. Когда вы нажимаете родительскую категорию, она должна отображать подкатегории ниже. Если вы в любой момент щелкнете по той же родительской категории, она должна отменить выбор всех дочерних элементов и снова скрыть их.

Я также хочу, чтобы в любой данный момент была выбрана только 1 родительская категория.

Позвольте мне дать вам сценарий. Вы нажимаете на Cat A, он расширяется и показывает 4 подкатегории. Вы нажимаете 2 из этих подкатегорий. Вы передумаете и вместо этого нажмете на Cat B. Это должно затем скрыть подкатегории Cat A и отменить выбор дочерних элементов, а также родительского элемента Cat A.

Просто, если я не прояснил это достаточно, важно, чтобы вы никогда не могли выбрать подкатегорию без родительской категории.

Я сделал основную скрипку с чем-то, что я нашел в другой теме. Просто для показа и скрытия (хотя я еще не добавил класс для скрытия). Это имеет html структуру, которую мы используем.

Другая проблема заключается в том, что все родительские категории используют один и тот же класс для детей (.children).

$('#in-download_category-156').click(function() {
  $(".children").toggle(this.checked);
});

FIDDLE

Я знаю, что это большая просьба, поэтому я ценю любую помощь, которую вы можете бросить мне! Спасибо

Источник

1 ответ

Решение

Попробуйте это (я добавил несколько заметок внизу):

$('.fes-category-checklist > li > input[name^="download_category"]').change(function() {
  $(this)
    .closest('ul')
    .find('input[name^="download_category"]')
    .not(this)
    .prop('checked', false);
});
ul {
  list-style: none;
  padding-left: 20px;
}

ul.fes-category-checklist > li > input[name^="download_category"]:not(:checked) ~ ul.children {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="fes-category-checklist">
  <li id="download_category-156">
    <input value="156" type="checkbox" name="download_category[]" id="in-download_category-156" />
    <label for="in-download_category-156" class="selectit">cat a</label>

    <ul class="children">
      <li id="download_category-161"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> cat a-1</label></li>

      <li id="download_category-162"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> cat a-2</label></li>

      <li id="download_category-163"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> cat a-3</label></li>

      <li id="download_category-183"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> cat a-4</label></li>
    </ul>
  </li>

  <li id="download_category-160">
    <input value="160" type="checkbox" name="download_category[]" id="in-download_category-160" />
    <label for="in-download_category-160" class="selectit">cat b</label>

    <ul class="children">
      <li id="download_category-198"><label class="selectit"><input value="198" type="checkbox" name="download_category[]" id="in-download_category-198"> cat b-1</label></li>

      <li id="download_category-199"><label class="selectit"><input value="199" type="checkbox" name="download_category[]" id="in-download_category-199"> cat b-2</label></li>

      <li id="download_category-200"><label class="selectit"><input value="200" type="checkbox" name="download_category[]" id="in-download_category-200"> cat b-3</label></li>

      <li id="download_category-201"><label class="selectit"><input value="201" type="checkbox" name="download_category[]" id="in-download_category-201"> cat b-4</label></li>
    </ul>
  </li>

  <li id="download_category-155">
    <input value="155" type="checkbox" name="download_category[]" id="in-download_category-155" />
    <label for="in-download_category-155" class="selectit">cat c</label>

    <ul class="children">
      <li id="download_category-164"><label class="selectit"><input value="164" type="checkbox" name="download_category[]" id="in-download_category-164"> cat c-1</label></li>

      <li id="download_category-165"><label class="selectit"><input value="165" type="checkbox" name="download_category[]" id="in-download_category-165"> cat c-2</label></li>

      <li id="download_category-166"><label class="selectit"><input value="166" type="checkbox" name="download_category[]" id="in-download_category-166"> cat c-3</label></li>

      <li id="download_category-169"><label class="selectit"><input value="169" type="checkbox" name="download_category[]" id="in-download_category-169"> cat c-4</label></li>

      <li id="download_category-171"><label class="selectit"><input value="171" type="checkbox" name="download_category[]" id="in-download_category-171"> cat c-5</label></li>

      <li id="download_category-168"><label class="selectit"><input value="168" type="checkbox" name="download_category[]" id="in-download_category-168"> cat c-6</label></li>

      <li id="download_category-170"><label class="selectit"><input value="170" type="checkbox" name="download_category[]" id="in-download_category-170"> cat c-7</label></li>

      <li id="download_category-202"><label class="selectit"><input value="202" type="checkbox" name="download_category[]" id="in-download_category-202"> cat c-8</label></li>
    </ul>
  </li>

  <li id="download_category-157">
    <input value="157" type="checkbox" name="download_category[]" id="in-download_category-157" />
    <label class="selectit" for="in-download_category-157">cat d</label>
  </li>
</ul>

Обратите внимание, что я перемещаю первые группы флажков из label и присваивая for приписывать им.

Чтобы связать <label> с <input> элемент, как показано в примере выше, вам нужно дать <input> id приписывать. <label> тогда нужен for атрибут, значение которого совпадает с входным id,

Также в нашем случае используется некоторый трюк CSS, который позволяет "стилизовать" любые соседние элементы на основе псевдокласса элемента: элемент флажка с :checked государство. Так как наш ul.children Они не являются непосредственными родственниками флажков, вместо дочернего комбинатора нам нужно использовать общий братский комбинатор, чтобы выбрать их для стилизации. Это помогает в том, что вам не нужен Javascript для переключения состояния видимости UL подкатегории.

Правки

Итак, поскольку структура HTML должна оставаться неизменной и тот факт, что родительские и дочерние элементы совместно используют одни и те же классы, у нас, вероятно, нет большого выбора, кроме как использовать цепочечные дочерние комбинаторы, потому что мы не хотим, чтобы какой-либо из дети, чтобы получить те же стили, что и родитель. Если вы не можете назначить какой-то специальный класс или атрибут (например, <li id="download_category-156" class="parent-category">) на родителей, чтобы отделить их от детей.

Это будет выглядеть немного некрасиво (более длинный селектор), но это должно решить проблему:

$('.fes-category-checklist > li > label.selectit > input[name^="download_category"]').change(function() {
  var categoryId = this.value;
  var $checkbox = $(this);

  $('.fes-category-checklist')
    .find('li[id^="download_category"]')
    .attr('data-open', function(index, value) {
      return this.id.endsWith(categoryId) && value === 'false';
    });

  $checkbox
    .closest('ul')
    .find('input[name^="download_category"]')
    .not(this)
    .prop('checked', false);
});

$(document).ready(function() {
  $('ul.fes-category-checklist')
    .find('> li[id^="download_category"]')
    .attr('data-open', false)
    .fadeIn();
});
ul {
  list-style: none;
  padding-left: 20px;
}

ul.fes-category-checklist > li {
  display: none;
}

li[data-open="false"] > ul.children {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<ul class="fes-category-checklist">
  <li id="download_category-156">
    <label class="selectit">
      <input value="156" type="checkbox" name="download_category[]" id="in-download_category-156"> cat a
    </label>
    <ul class="children">
      <li id="download_category-161"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> cat a-1</label></li>

      <li id="download_category-162"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> cat a-2</label></li>

      <li id="download_category-163"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> cat a-3</label></li>

      <li id="download_category-183"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> cat a-4</label></li>
    </ul>
  </li>

  <li id="download_category-160">
    <label class="selectit">
      <input value="160" type="checkbox" name="download_category[]" id="in-download_category-160"> cat b
    </label>
    <ul class="children">
      <li id="download_category-198"><label class="selectit"><input value="198" type="checkbox" name="download_category[]" id="in-download_category-198"> cat b-1</label></li>

      <li id="download_category-199"><label class="selectit"><input value="199" type="checkbox" name="download_category[]" id="in-download_category-199"> cat b-2</label></li>

      <li id="download_category-200"><label class="selectit"><input value="200" type="checkbox" name="download_category[]" id="in-download_category-200"> cat b-3</label></li>

      <li id="download_category-201"><label class="selectit"><input value="201" type="checkbox" name="download_category[]" id="in-download_category-201"> cat b-4</label></li>
    </ul>
  </li>

  <li id="download_category-155">
    <label class="selectit">
      <input value="155" type="checkbox" name="download_category[]" id="in-download_category-155"> cat c
    </label>
    <ul class="children">
      <li id="download_category-164"><label class="selectit"><input value="164" type="checkbox" name="download_category[]" id="in-download_category-164"> cat c-1</label></li>

      <li id="download_category-165"><label class="selectit"><input value="165" type="checkbox" name="download_category[]" id="in-download_category-165"> cat c-2</label></li>

      <li id="download_category-166"><label class="selectit"><input value="166" type="checkbox" name="download_category[]" id="in-download_category-166"> cat c-3</label></li>

      <li id="download_category-169"><label class="selectit"><input value="169" type="checkbox" name="download_category[]" id="in-download_category-169"> cat c-4</label></li>

      <li id="download_category-171"><label class="selectit"><input value="171" type="checkbox" name="download_category[]" id="in-download_category-171"> cat c-5</label></li>

      <li id="download_category-168"><label class="selectit"><input value="168" type="checkbox" name="download_category[]" id="in-download_category-168"> cat c-6</label></li>

      <li id="download_category-170"><label class="selectit"><input value="170" type="checkbox" name="download_category[]" id="in-download_category-170"> cat c-7</label></li>

      <li id="download_category-202"><label class="selectit"><input value="202" type="checkbox" name="download_category[]" id="in-download_category-202"> cat c-8</label></li>
    </ul>
  </li>

  <li id="download_category-157">
    <label class="selectit"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> cat d</label>
  </li>
</ul>

Добавление исходного состояния видимости детей

Следующие строки установят их как hidden первоначально. Вы также можете передать функцию во втором аргументе, если вы хотите настроить состояния по отдельности.

$(document).ready(function() {
  $('ul.fes-category-checklist')
    .find('> li[id^="download_category"]')
    .attr('data-open', false)
    .fadeIn();
});

Кроме того, если вы хотите дать детям UL какой-то необычный эффект, пока они переключаются, посмотрите мой другой пост о том, как вы можете сделать это с помощью jQuery. slideToggle,

Надеюсь, это поможет!

Источник
Другие вопросы по тегам