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

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

0 голосов
/ 24 января 2019

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

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

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

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

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

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

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

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

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

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

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

FIDDLE

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

1 Ответ

0 голосов
/ 24 января 2019

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

$('.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 s не являются непосредственными родственниками флажков, вместо дочернего комбинатора нам нужно использовать общий родственный комбинатор , чтобы нацелить их на стилизацию. Это помогает в том, что вам не нужен 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.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...