如何使 bootstrap vue collapsibles 在 ul 和 li 文件夹结构上工作

Question

我正在使用 HTML 和 CSS 创建一个类似结构的文件夹 link:

我希望项目在单击时折叠并打开。这包括一对嵌套的 bootstrap 可折叠物。由于某种原因，它们一起被触发，整个系统没有按预期工作。

这是我的代码：

<div class="tree">
  <ul>
    <li v-b-toggle.collapse-1>
      <i class="fa fa-folder-open" /> Project
      <b-collapse id="collapse-1">
        <ul>
          <li v-b-toggle.collapse-2>
            <i class="fa fa-folder-open" /> Opened Folder <span>- 15kb</span>
            <b-collapse id="collapse-2">
              <ul>
                <li v-b-toggle.collapse-3>
                  <i class="fa fa-folder-open" /> css
                  <b-collapse id="collapse-3">
                    <ul>
                      <li>
                        <i class="fa fa-code" /> CSS Files <span>- 3kb</span>
                      </li>
                    </ul>
                  </b-collapse>
                </li>
                <li>
                  <i class="fa fa-folder" /> Folder close <span>- 10kb</span>
                </li>
                <li><i class="fab fa-html5" /> index.html</li>
                <li><i class="fa fa-picture-o" /> favicon.ico</li>
              </ul>
            </b-collapse>
          </li>
          <li>
            <i class="fa fa-folder" /> Folder close <span>- 420kb</span>
          </li>
        </ul>
      </b-collapse>
    </li>
  </ul>
</div>

这里有一个 fiddle link 显示了问题：

https://jsfiddle.net/p6fj58tv/

Answer 1

问题是嵌套折叠也是第一个或最顶部触发元素的一部分

https://jsfiddle.net/twj28z1m/

我改成了

          <li v-b-toggle.collapse-2>
            <i class="fa fa-folder-open" /> Opened Folder <span>- 15kb</span>
            <b-collapse id="collapse-2">

这个

 <li >
        <span v-b-toggle.collapse-1>
          <i class="fa fa-folder-open" /> Project
          </span>
         <b-collapse id="collapse-2">

该更改应该在第一级修复它。您可以对其他元素使用相同的方法

如何使 bootstrap vue collapsibles 在 ul 和 li 文件夹结构上工作

How do I make bootstrap vue collapsibles work on ul and li folder structure

html

javascript

css

bootstrap-vue