优化带折叠功能的嵌套列表：实现四项定制需求问询

基于Stack Exchange上关于列表缩进对齐的相关话题，现需为以下嵌套列表代码添加多项功能：

现有代码 #

JavaScript #

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

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

CSS #

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  cursor: default;
}

ol {
  counter-reset: item;
}

li {
  display: block;
}

li:before {
  content: counters(item, ".") " ";
  /* content: counters(item, ".", decimal-leading-zero) " "; */
  counter-increment: item;
}

li:has(ol):before {
  float: left;
  /* margin-bottom: 5px; */
}

ol ol {
  overflow: hidden;
}

.active {
  color: green;
}

HTML #

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

功能需求 #

• 点击父菜单项（如Coffee、Tea）时，子菜单展开后左对齐到父项文本下方，而非父项数字的右侧
• 同一时间仅允许展开一个子菜单
• 最后点击的菜单项自动切换.active类（绿色文字）
• 当某层级菜单项数量超过9个时，该层级所有菜单项的数字前自动补0，保证对齐效果（如01、02...10）

示例效果：子菜单与父项文本左对齐，展开状态唯一，点击项高亮，多数量时数字补0对齐。

实现方案 #

1. 子菜单对齐父文本 #

通过给li设置左侧内边距，将计数器内容固定到内边距区域，子层级列表增加内边距实现缩进对齐：

li {
  display: block;
  padding-left: 3em; /* 预留计数器占位空间 */
  position: relative;
  line-height: 1.5;
}

li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
  position: absolute;
  left: 0; /* 固定到左侧内边距位置 */
  width: 3em;
  text-align: left;
}

ol ol li {
  padding-left: 4em; /* 子层级增加内边距，保证层级缩进 */
}

2. 单一展开菜单限制 #

修改点击事件逻辑，先关闭所有非当前的子菜单，再切换当前菜单，同时阻止事件冒泡避免父级触发：

$('li').click(function(e) {
  e.stopPropagation();
  const currentSubMenu = $(this).children('ol');
  $('ol ol').not(currentSubMenu).hide();
  currentSubMenu.toggle();
});

3. 点击项切换.active类 #

在点击事件中先移除所有li的.active类，再给当前点击项添加：

$('li').click(function(e) {
  e.stopPropagation();
  $('li').removeClass('active');
  $(this).addClass('active');
  
  const currentSubMenu = $(this).children('ol');
  $('ol ol').not(currentSubMenu).hide();
  currentSubMenu.toggle();
});

4. 数量超过9自动补0 #

通过JS检测每个ol的子项数量，若≥10则为该ol添加类，对应CSS使用补0计数器格式：

/* 新增补0计数器样式 */
ol.pad-zero li:before {
  content: counters(item, ".", decimal-leading-zero) " ";
}

// 初始化检测所有ol的子项数量
$('ol').each(function() {
  if ($(this).children('li').length >= 10) {
    $(this).addClass('pad-zero');
  }
});

完整整合代码 #

JavaScript

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

  // 初始化检测补0
  $('ol').each(function() {
    if ($(this).children('li').length >= 10) {
      $(this).addClass('pad-zero');
    }
  });

  $('li').click(function(e) {
    e.stopPropagation();
    // 切换active类
    $('li').removeClass('active');
    $(this).addClass('active');
    // 单一展开控制
    const currentSubMenu = $(this).children('ol');
    $('ol ol').not(currentSubMenu).hide();
    currentSubMenu.toggle();
  });
});

CSS

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  cursor: default;
}

ol {
  counter-reset: item;
}

li {
  display: block;
  padding-left: 3em;
  position: relative;
  line-height: 1.5;
}

li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
  position: absolute;
  left: 0;
  width: 3em;
  text-align: left;
}

ol ol li {
  padding-left: 4em;
}

ol.pad-zero li:before {
  content: counters(item, ".", decimal-leading-zero) " ";
}

.active {
  color: green;
}

HTML

<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>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
      <li>Seven</li>
      <li>Eight</li>
      <li>Nine</li>
      <li>Ten</li>
    </ol>
  </li>
  <li>Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
  <li>Juice</li>
  <li>Soda</li>
  <li>Water</li>
  <li>Beer</li>
  <li>Wine</li>
  <li>Cider</li>
</ol>

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