使用jQuery创建嵌套列表的技术实现求助

嘿，我看了你的代码，发现几个关键问题导致渲染失败，同时帮你加上了点击展开/收起的功能，一起来看看：

你的代码里的主要问题： #

• 子列表项创建错误：你写了subli.appendTo(subli)，这相当于把li元素添加到自己身上，完全不符合逻辑；而且subli变量只在循环内定义，但你在循环外才尝试添加到$subul，最后只会添加最后一个子项。
• 子列表的添加时机错误：应该在遍历每个value的时候，就把创建好的子li直接添加到$subul里，而不是等循环结束后再处理。
• 容器选择器错误："div_containing_ul"不是有效的选择器，如果是ID应该写成"#div_containing_ul"，如果是类则是".div_containing_ul"，否则jQuery找不到目标容器。
• 缺少展开/收起逻辑：没有给key的点击事件绑定切换子列表显示状态的代码。

修正后的完整代码： #

jQuery(document).ready(function($) {
  // 这里保留你的$.get请求逻辑，我用示例数据方便演示
  $.get('url', function(data){
    const $ul = $('<ul></ul>');

    function getList(item, $list) {
      $.each(item, function(key, values) {
        // 创建父级li
        const $li = $('<li></li>');
        // 创建可点击的key标签，加类方便绑定事件
        const $keyLink = $('<a href="#"></a>').text(key).addClass('toggle-key');
        $li.append($keyLink);

        // 创建子ul，默认隐藏
        const $subul = $('<ul></ul>').hide();

        // 遍历values创建子li并添加到子ul
        $.each(values, function(index, value) {
          const $subLi = $('<li></li>').text(value);
          $subul.append($subLi);
        });

        // 把子ul添加到父li，父li再添加到外层ul
        $li.append($subul);
        $list.append($li);
      });
    }

    getList(data, $ul);
    // 替换成你的目标容器选择器，比如ID为div_containing_ul就用#div_containing_ul
    $ul.appendTo('#div_containing_ul');

    // 添加展开/收起的点击事件
    $('.toggle-key').on('click', function(e) {
      e.preventDefault(); // 阻止a标签默认跳转行为
      // 切换紧邻的子ul的显示状态
      $(this).next('ul').toggle();
    });
  });
});

代码说明： #

1. 修正子列表渲染逻辑：每次遍历value时，创建对应的子li并直接追加到子ul中，确保所有子项都能正确渲染。
2. 默认隐藏子列表：给子ul加上.hide()，初始状态下不展开，符合下拉列表的需求。
3. 添加点击事件：给key的a标签绑定点击事件，通过toggle()方法切换子ul的显示/隐藏状态，同时用e.preventDefault()阻止a标签的默认跳转行为。
4. 修正容器选择器：明确使用ID/类选择器，确保列表能正确插入到目标容器中。

你只需要把这段代码替换原有代码，根据实际情况调整容器选择器即可正常运行。

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