我可以定位一个特定的 Flexbox 容器并用另一个文件的内容填充它吗？

Question

我正在寻找一种根据主菜单的选择动态填充子菜单的方法，然后，当用户单击子菜单中的项目时，它会用另一个文件的内容填充两个弹性框。我不知道如何使用 JS 定位 flexbox；或者，如果那不可能，我可以做些什么。例如：

    MENU 1     MENU 2     MENU 3     // user selects menu 2, which populates the submenu from a file
                 ^
    submenu 1 submenu 2 submenu 3    // user selects submenu 3, which populates the flexbox containers

FLEXBOX 容器：

------------------------  -----------------------------------------
| SUBMENU 3 HTML PAGE  |  |        SUBMENU 3 HTML PAGE            |
|                      |  |                                       |
|                      |  |                                       |
|   has options that   |  |       dynamically populates           |
|  affect the contents |  |      based on the options selected    |
|   of the other box   |  |       in the other box                |
|                      |  |                                       |
------------------------  -----------------------------------------

这可能吗？我应该搜索什么来弄清楚？我用谷歌搜索无济于事，我不是在寻找正确的短语。我应该寻找什么？

Answer 1

这是一种可能的实现方式。您在每个触发元素上添加一个事件监听器——在我的例子中，一个 button。单击该按钮时，您将定位与该按钮相邻的 .flex 元素并动态插入 HTML 内容。

const btns = Array.from(document.querySelectorAll('button'))

const clearContent = () => {
  Array.from(document.querySelectorAll('.flex')).forEach(item => item.innerHTML = '')
}

btns.forEach((btn, index) => {
  btn.addEventListener("click", () => {
    clearContent();
    btn.parentNode.querySelector('.flex').innerHTML = menuContents[index]
  })
})

const menuContents = [
  '<div>sub 1</div><div>sub 2</div><div>sub 3</div>',
  '<div>sub 4</div><div>sub 5</div><div>sub 6</div>',
  '<div>sub 7</div><div>sub 8</div><div>sub 9</div>'
]

.flex {
  text-align: center;
  display: flex;
  position: absolute;
  left: 50%;
  top: 1.5rem;
  transform: translateX(-50%);
  column-gap: 1rem;
  white-space: nowrap;
}

.flex:empty {
  display: none;
}

.outer {
  position: relative;
}

body {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

<div class="outer">
  <button>
    Menu 1
  </button>
  <div class="flex"></div>
</div>

<div class="outer">
  <button>
    Menu 2
  </button>
  <div class="flex"></div>
</div>

<div class="outer">
  <button>
    Menu 3
  </button>
  <div class="flex"></div>
</div>

jsFiddle

我可以定位一个特定的 Flexbox 容器并用另一个文件的内容填充它吗？

Can I target a specific Flexbox container and fill it with the contents of another file?

javascript

html

css

reactjs

flexbox