为什么这段jQuery列表折叠切换代码无法正常工作？

核心问题：HTML嵌套列表结构不符合规范 #

代码不生效的根本原因是嵌套列表的HTML写法错误。在HTML规范里，<ol>（有序列表）的直接子元素只能是<li>，子列表必须嵌套在<li>内部，而不是和<li>同级放置。

你原来的代码里，子<ol>是和"Coffee""Tea"的<li>平级的，这就导致JS中$(this).children('ol')根本找不到对应的子列表——因为它不是点击的<li>的子节点。

修正后的代码 #

修正HTML结构 #

把包含子列表的<li>改成包裹文本和子列表的结构：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>
    Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>
    Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

JS代码无需修改（结构修正后即可生效） #

$(document).ready(function() {
  $('ol ol').hide();

  $('li').click(function() {
    $(this).children('ol').toggle();
  });
});

额外优化建议 #

如果不想让没有子列表的<li>（比如Milk、Cool）也响应点击事件，可以给包含子列表的<li>添加类名，缩小事件绑定范围：

1. HTML修改：

<li class="has-submenu">
  Coffee
  <ol>...</ol>
</li>
<li class="has-submenu">
  Tea
  <ol>...</ol>
</li>

2. JS修改：

$(document).ready(function() {
  $('ol ol').hide();

  $('li.has-submenu').click(function() {
    $(this).children('ol').toggle();
  });
});

内容的提问来源于stack exchange，提问作者Anna_B