Question

首先，我将作为一个狂热的浏览器（但从未发布过）表示感谢，

我正在为我的雇主代码部门创建一个页面，该页面需要使用动态下拉菜单，因为下拉菜单的数量每页都会波动。

上下文：

最初，我们使用的是标准的Bootstrap下拉菜单，但我们的客户处理的某些Web提供程序并未加载Bootstrap。我最初的想法是将其侧面加载，但是，我们致力于为所有客户及其所有Web提供商全面使用的模板。长话短说，引导CSS文件会覆盖很多未考虑引导构建的网站，因此存在稳定性问题。

问题所在：

这是我的CodePen，供您查看。

dropdown = () => {
const dropdown = document.getElementsByClassName("dropdown");
for (let i = 0; i < dropdown.length; i++) {
  const activeDropdown = dropdown[i].id,
        down = "#downChev-" + activeDropdown,
        up = "#upChev-" + activeDropdown,
        downIcon = document.querySelector(down),
        upIcon = document.querySelector(up),
        dropdownNumID = "#" + activeDropdown,
        dropdownID = "#dropdown-" + activeDropdown;

  if (event.target.matches(dropdownNumID)) {
    if (upIcon.classList.contains("show-icon")) {
      upIcon.classList.remove("show-icon");
      downIcon.classList.add("show-icon");
    } else if (downIcon.classList.contains("show-icon")) {
      downIcon.classList.remove("show-icon");
      upIcon.classList.add("show-icon");
    }
    document.querySelector(dropdownID).classList.toggle("dropdown-show")
  }
 }
}

目前，我已经建立了一个动态下拉列表系统，该系统利用每个下拉列表的特定ID。问题在于，在通过下拉列表创建支持变量的第一个循环中，它不会创建activeDropdown变量，而是在登录时返回空白变量。

我已经在多种情况下进行了故障排除，并提出了以下建议：

在localhost和CodePen中，代码似乎正常运行。一旦添加到实时站点，它就会在循环内初始化activeDropdown变量时中断，并在登录时返回空白变量。
如果在循环中设置变量后立即删除 if 条件，并记录activeDropdown变量。它记录良好。这使我相信这可能是一个同步问题。然后，我将 if 条件转换为自己的函数，并添加了settimeout，允许在运行新的延迟函数中的执行项目之前初始化变量。添加后，activeDropdown变量不再正确设置。登录后只会返回空白。

我不确定执行逻辑是否已关闭，或者我是否使整个过程过于复杂。唯一真正的目标是创建一个动态结构，使我的前端开发团队可以随意添加或删除模型div，并随着列表的增加对ID进行简单的修改。

我们无法访问的其他脚本也有可能在实时站点上引起问题。但是，我认为你们可以在我的代码中找到问题了。

Answer 1

由于生产环境可能与代码笔有很大不同，因此很难知道发生了什么，但是我认为可能会发生一些事情。

1）可能是JavaScript在整个页面加载之前就已运行。确保与CodePen等效的JavaScript代码在页面上最后加载。（即，将<script></script>标签放在文档的最后）。

2）某些变量可能会冲突，因为您是直接在全局范围内的文档正文中加载JavaScript。我有一些一般的风格建议，可以帮助您解决问题：

通过查看CodePen，您正在使用两种不同的方法来对单击事件作出反应：您已经设置了事件监听器，并在window.onclick上进行了回调，以及2）名为{{1}的函数}附加到HTML中的dropdown属性。

我建议不要使用内联onclick属性，而是将事件侦听器添加到下拉列表的容器中。这样，您的标记就不会与下拉JS耦合，并且您正在侦听该容器中的单击，而不是整个应用程序。您可以使用相同的事件侦听器来打开和关闭下拉列表。 See this stackoverflow post for more information about this。

此外，我建议在代码周围添加一个包装函数，以防止污染全局范围。页面加载时可以立即调用此函数，并将在容器上添加事件侦听器。 You can read more about IIFE's here.

这里有CodePen，说明了这两个建议。虽然我不知道这是否可以帮助您解决问题，但希望至少您会学到新知识！

在本地主机上设置循环变量，但不在活动站点上设置循环变量

1 个答案:

在本地主机上设置循环变量，但不在活动站点上设​​置循环变量

1 个答案:

在本地主机上设置循环变量，但不在活动站点上设置循环变量