jQuery: стратегически переключать наборы элементов списка на основе класса и позиционирования в списке - PullRequest
Новая
       23

jQuery: стратегически переключать наборы элементов списка на основе класса и позиционирования в списке

0 голосов
/ 21 апреля 2020

Я строю трехуровневое иерархическое меню (Категории / Разделы / Подразделы), которое создается в виде набора элементов списка в одном неупорядоченном списке. У меня уже есть некоторые функции переключения, но теперь мне нужно иметь возможность использовать метод onClick , чтобы, если у определенного Раздела есть дочерние элементы (Подразделы), нажатие на этот Раздел отображало / скрывало его дети (подразделы). Более конкретно - всякий раз, когда элемент списка с классом 'se c' немедленно обрабатывает один или несколько элементов списка с классом 'subse c', я хочу, чтобы 'se c 'элемент списка, служащий переключателем для смежных элементов списка' subse c '. Снимок экрана ниже должен помочь проиллюстрировать архитектуру списка и поведение, которое я собираюсь реализовать:

Menu List Items

Проблема в том, что быть более чем одним набором подразделов в меню, поэтому код, который управляет этой штукой, должен быть достаточно 'generi c' для обработки нескольких экземпляров, но иметь достаточно узкую область видимости, чтобы данный раздел ('se c) «элемент списка» может переключать только смежные подразделы (элементы списка «subse c»).

В итоге: всякий раз, когда элемент списка Раздела (имеет класс 'se c') немедленно переходит к одному или нескольким элементам списка Подраздела (имеет класс 'subse c'), начальный элемент списка Раздела должен служить триггером, который переключает элементы списка подразделов, которые следуют непосредственно за ним. Но этот конкретный случай переключающего поведения должен прекратиться, как только в списке появится следующий элемент списка (имеет класс 'se c').

Надеюсь, мое объяснение было достаточно ясным. Заранее благодарим за помощь.

Вот пример (и продезинфицированный) HTML Код, взятый из фактического меню: 

<ul id="categories"><-- Top-level list that contains all category sub-lists -->

<ul><-- Initial category and its sections -->
<li class="cat" catid="360002246652"><a>Category 1 (Toggle)</a></li>

<li class="sec" secid="360007912231" categoryid="360002246652" parentsecid="null" style="display: none;"><a href="https://MyURL/sections/360007912231">Section1</a></li>

<li class="sec" secid="360007910471" categoryid="360002246652" parentsecid="null" style="display: none;"><a href="https://MyURL/sections/360007910471">Section2</a></li>

<li class="sec" secid="360007106191" categoryid="360002246652" parentsecid="null" style="display: none;"><a href="https://MyURL/sections/36000710619">Section3</a></li>

<li class="sec" secid="360007106171" categoryid="360002246652" parentsecid="null" style="display: none;"><a href="https://MyURL/sections/360007106171">Section4</a></li>
</ul>

<ul><-- Second category and its sections / subsections -->
<li class="cat" catid="360002254991"><a>Category 2 (Toggle)</a></li>

<li class="sec" secid="360007012012" categoryid="360002254991" parentsecid="null" style=""><a href="https://MyURL/sections/360007012012">Section 1</a></li>

<li class="subsec" secid="360007060252" categoryid="360002254991" parentsecid="360007012012" style=""><a href="https://MyURL/sections/360007060252">SubSectionA</a></li>

<li class="subsec" secid="360007106751" categoryid="360002254991" parentsecid="360007012012" style=""><a href="https://MyURL/sections/360007106751">SubSectionB</a></li>

<li class="subsec" secid="360008585272" categoryid="360002254991" parentsecid="360007012012" style=""><a href="https://MyURL/sections/360008585272">SubSectionC</a></li>

<li class="sec" secid="360007012692" categoryid="360002254991" parentsecid="null" style=""><a href="https://MyURL/360007012692">Section2</a></li>

<li class="sec" secid="360007012712" categoryid="360002254991" parentsecid="null" style=""><a href="https://MyURL/sections/360007012712">Section3</a></li>
</ul>

</ul>

1 Ответ

1 голос
/ 23 апреля 2020

Как насчет этого? Я взял на себя смелость удалить элементы, чтобы сосредоточиться на функциях, которые вы упомянули. Я добавил обработчики событий в записи категорий, а также в записи разделов и чуть-чуть CSS для поддержки переключения видимости. 

  .cat, .sec { cursor: pointer; }
  .sec, .subsec { display: none; }
  ul.catIsVis .sec { display: block; }
  .subsec.subsecIsVis { display: block; }

html

<div>
 <ul id="categories"><!-- Top-level list that contains all category sub-lists -->
    <ul><!-- Initial category and its sections -->
      <li class="cat" catid="360002246652">Category 1 (Toggle)</li>
      <li class="sec" secid="360007912231" categoryid="360002246652" parentsecid="null">Section1</li>
      <li class="sec" secid="360007910471" categoryid="360002246652" parentsecid="null">Section2</li>
      <li class="sec" secid="360007106191" categoryid="360002246652" parentsecid="null">Section3</li>
      <li class="sec" secid="360007106171" categoryid="360002246652" parentsecid="null">Section4</li>
    </ul>
    <ul><!-- Second category and its sections / subsections -->
      <li class="cat"    catid="360002254991">Category 2</li>
      <li class="sec"    secid="360007012012" categoryid="360002254991" parentsecid="null" style="">Section 1</li>
      <li class="subsec" secid="360007060252" categoryid="360002254991" parentsecid="360007012012" style="">SubSectionA</li>
      <li class="subsec" secid="360007106751" categoryid="360002254991" parentsecid="360007012012" style="">SubSectionB</li>
      <li class="subsec" secid="360008585272" categoryid="360002254991" parentsecid="360007012012" style="">SubSectionC</li>
      <li class="sec"    secid="360007012692" categoryid="360002254991" parentsecid="null" style="">Section2</li>
      <li class="sec"    secid="360007012712" categoryid="360002254991" parentsecid="null" style="">Section3</li>
    </ul>
 </ul>
</div>

JavaScript

 $('.cat').on('click', function () {
    $(this).parent().toggleClass('catIsVis');
 })

 $('.sec').on('click', function () {
    const $thissec = $(this);
    const secid = $thissec.attr('secid');
    console.log(`sec secid is ${$thissec.attr('secid')}`)
    $.each($thissec.parent().find('.subsec'), function (anindex, asubsec) {
      const parentsecid = $(asubsec).attr('parentsecid');
      console.log(`subsec subsecid is ${parentsecid}`);
      if (secid == parentsecid) {
         $(asubsec).toggleClass('subsecIsVis');
      }
    })
 });
...