如何使bootstrap vue可折叠文件在ul和li文件夹结构上工作？

Question

我正在使用HTML和CSS创建一个类似文件夹的结构，如下所示：

https://codepen.io/sazzad/pen/gEEKQb

我希望项目在单击时折叠并打开。这包括几个嵌套的引导程序可折叠。由于某些原因，它们都被触发在一起，整个系统并没有像预期的那样工作。

这是我的代码：

<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>

这是一个显示问题的小提琴链接：

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">

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