动态添加的ul/li下拉列表无法展开切换问题求助

核心问题：事件绑定失效 #

你遇到的问题是事件委托缺失导致的——原来的菜单展开逻辑应该是直接绑定在静态的.my-main-menu元素上，但动态生成的元素在页面初始化时并不存在，所以事件没有绑定到这些新元素上。

解决方法：使用事件委托 #

把点击事件绑定到已经存在的父容器（比如你的#MainMenu）上，通过监听子元素的点击来触发逻辑，这样不管元素是静态还是动态生成的，都能响应事件。

jQuery 实现

// 替换你原来的菜单点击绑定代码
$('#MainMenu').on('click', '.my-main-menu > a', function(e) {
  e.preventDefault();
  // 这里替换成你原来的展开/切换逻辑，示例如下：
  const $menu = $(this).closest('.my-main-menu');
  $menu.find('[data-level="2"]').toggle();
  $menu.toggleClass('active'); // 如果用样式类控制展开状态
});

原生 JavaScript 实现

document.getElementById('MainMenu').addEventListener('click', function(e) {
  const trigger = e.target.closest('.my-main-menu > a');
  if (!trigger) return;
  
  e.preventDefault();
  const mainMenu = trigger.closest('.my-main-menu');
  const subMenu = mainMenu.querySelector('[data-level="2"]');
  
  // 切换子菜单显示状态
  subMenu.style.display = subMenu.style.display === 'none' ? 'block' : 'none';
  mainMenu.classList.toggle('active');
});

额外修复：模板字符串的引号错误 #

你的代码中模板字符串存在引号嵌套混乱的问题，会导致生成的HTML语法错误，比如DirectLinkTemplate和SubLinkTemplate里的onclick属性：

// 错误写法：引号拼接后不闭合
DirectLinkTemplate = '<li> <a class="my-main-menu-1" onclick="GetAddPage(' + "'" + LinkCode + "'" + ')">...';

实际生成的HTML会变成onclick="GetAddPage('xxx")>，语法无效。建议改用ES6模板字符串，避免拼接错误：

DirectLinkTemplate = `<li> 
  <a class="my-main-menu-1" onclick='GetAddPage("${LinkCode}")'>  
    <i style="margin-top:6px; font-size:8px" class="fa fa-circle"></i>${LinkTitle}
  </a>
</li>`;

SubLinkTemplate也需要做同样的引号修正。

最后检查 #

确保动态生成的HTML结构、class名称、data属性和静态版本完全一致，比如.my-main-menu、[data-level="2"]这些标识不能写错。

内容的提问来源于stack exchange，提问作者Mohammed abd elaziz