jQuery：根据类和列表中的位置来策略性地切换列表项集

Question

我正在构建一个三层的分层菜单（类别/部分/子部分），该菜单被构造为单个无序列表中的一堆列表项。我已经有一些切换功能，但是现在我需要能够使用onClick方法，以便如果特定的节具有子级（SubSections），则单击该节将显示/隐藏其子级（小节）。更具体地说-每当“ sec”类的列表项立即进行“ subsec”类的一个或多个列表项时，我希望该“ sec”列表项充当相邻项的切换“ subsec”列表项。下面的屏幕截图应有助于说明列表的体系结构以及我要实现的行为：

这里的挑战是菜单中将有一组以上的SubSections，因此驱动该事物的代码必须足够“通用”以处理多个实例，但要有足够的范围，以便给定的部分（“秒”列表项）只能切换紧邻的小节（“子秒”列表项）。

总结：每当“节”列表项（具有“ sec”类）立即进行一个或多个“子节”列表项（具有“ subsec”类）时，初始“节”列表项应作为触发来切换“子节”列表的触发器。紧随其后的项目。但是，只要列表显示了下一个Section（具有“ sec”类）列表项，该切换行为的特定实例就应立即停止。

我希望我的解释足够清楚。预先感谢您的帮助。

这里是从实际菜单中提取的一些示例代码（并经过消毒）：

<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>

Answer 1

怎么样？我已经自由删除了元素，以专注于您提到的功能。我在类别条目，节条目和少量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');
      }
    })
 });