点击<ul>元素控制嵌套<li>显示/隐藏的JavaScript代码交互异常问题

嘿，我帮你排查下这个问题～你现在遇到的点击后状态混乱的情况，主要是因为代码里几个关键的问题：

1. 嵌套绑定了点击事件：第一次点击元素时，你的代码会给这个元素再绑定一个新的点击回调。这就导致第二次点击时，两个回调会同时执行——一个负责展开，一个负责收起，直接冲突了，第三次点击自然就会出现“展开又立刻收起”的诡异情况。
2. 全局状态变量共享：用全局的opened变量来控制所有列表的状态，根本没法单独区分每个列表是展开还是收起的状态。
3. 回调函数传递错误：你写的$(.list__ul .nested-list.num-${countImg}).click(turnNestedlist(opened))是直接执行了turnNestedlist函数，把它的返回值（undefined）作为点击回调，这其实是错误的写法，导致绑定逻辑完全偏离预期。

给你两个修复后的方案，选哪个都行：

方案一：简洁版（自动适配所有嵌套列表） #

这个方案不用依赖countImg，直接给所有.nested-list绑定切换逻辑，每个列表自己维护状态：

$('.list__ul .nested-list').click(function(event) {
  // 阻止事件冒泡，避免父级元素误触发
  event.stopPropagation();
  const $currentList = $(this);
  // 切换active类，同时切换子项的显示/隐藏
  $currentList.toggleClass('active');
  $currentList.find('li').toggle('fast');
});

方案二：指定编号版（保留按num-xx绑定的逻辑） #

如果只需要给特定编号的列表绑定，可以这么写：

// 封装成独立函数，传递目标编号
function bindNestedToggle(targetNum) {
  $(`.list__ul .nested-list.num-${targetNum}`).click(function(event) {
    event.stopPropagation();
    const $currentList = $(this);
    $currentList.toggleClass('active');
    $currentList.find('li').toggle('fast');
  });
}

// 调用函数，传入你的countImg变量
bindNestedToggle(countImg);

这两个方案的核心逻辑是：

• 只给元素绑定一次点击事件，每次点击都在同一个回调里判断当前元素的状态（通过DOM上的active类）
• 用$(this)直接操作当前点击的列表，不用全局变量，每个列表的状态独立维护
• 用jQuery的toggleClass和toggle方法简化状态切换的逻辑，避免手动判断的错误

内容的提问来源于stack exchange，提问作者Андрей Димитриев