javascript - 带有动态数据目标的下拉列表中的嵌套可折叠复选框？

Question

使用 Bootstrap 4，我试图在Dropdown中实现这种结构

[] Level 1
  [] Level 2
    [] Level 3

其中项目是复选框输入并且是可折叠的。这是我正在尝试完成的最小工作示例：

<div class="dropdown">
  <button id="dropdownButton' class='btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
  </button>
  <form class="dropdown-menu">
    <ul id="level-1">
      <li class="dropdown-item">
        <label data-toggle="collapse" data-target="#level-2">
          <input type="checkbox"> Level 1
        </label>
        <ul id="level-2" class="collapse">
          <li class="dropdown-item">
            <label data-toggle="collapse" data-target="#level-3">
              <input type="checkbox"> Level 2
            </label>
            <ul id="level-3" class="collapse">
              <li class="dropdown-item">
                <label>
                  <input type="checkbox"> Level 3
                </label>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </form>
</div>

我form用来防止单击标签时关闭下拉菜单。问题似乎是data-target和/或id值是动态的（通过烧瓶上下文传递）。

例如：

<form class='dropdown-menu' aria-labelledby='{{ id }}' {% include 'fields/attrs.html' %}>
  <ul id='level-1-{{ id }}'>
    {% for title in dropdown_menu_items.values() %}
      <li class='dropdown-item'>
        <label class='form-check-label' data-toggle='collapse' data-target='#level-2-{{ id }}-{{ loop.index }}'>
          <input class='form-check-input' {% if title.provider_title_id %}name='{{ name }}'{% endif %} type="checkbox" {% if title.provider_title_id %}value='{{ title.provider_title_id }}'{% endif %} {% if title.checked %}checked='checked'{% endif %} />{{ title.title }}
        </label>
        <ul id='level-2-{{ id }}-{{ loop.index }}' class='collapse'>
...

我进行了测试以确保它与静态值“有效”，例如level-2andlevel-3它确实有效。有没有办法解决这个问题，或者我只是错过了一些明显的东西？

idTL;DR - 分配和data-target通过烧瓶上下文时展开/折叠不起作用；只有level-1元素是可见的。

标签： javascriptpythonflaskbootstrap-4