Twitter bootstrap 3 Bootstrap 3嵌套ULs折叠系统（无JS/jQuery）

我正在bootstrap3上构建类似“树视图”的东西。但我正在与崩溃的系统作斗争。展开父级时没有问题。但当我试图展开一个子对象时，它会展开它，但也会折叠父对象。等等

这是html

<div class="panel-collapse" role="tabpanel">
  <div class="panel-body">
    <ul class="treeview">
      <li data-toggle="collapse" class="collapse1" href=".collapse1-1">Item 1
        <ul class="collapse collapse1-1">
          <li data-toggle="collapse" href=".collapse1-1-1">Item 1-1
            <ul class="collapse collapse1-1-1">
              <li>Item 1-1-1
                <ul>
                  <li>Item 1-1-1-1</li>
                  <li>Item 1-1-1-2</li>
                  <li>Item 1-1-1-3</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>Item 1-2</li>
          <li>Item 1-3</li>
        </ul>
      </li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

项目1

第1-1项

项目1-1-1

项目1-1-1-1
项目1-1-1-2
项目1-1-1-3




项目1-2
项目1-3


项目2
项目3

下面是一个JSFIDLE：

有人能帮我吗？我希望这里有一个纯粹的引导解决方案，而不是定制的JS。除非你相信这是完全不可能的

---

干杯！：）

使用

li

标签内的链接，因为当您单击打开

项目1-1

时，您也在单击

项目1

li

<div class="panel-collapse" role="tabpanel">
  <div class="panel-body">
    <ul class="treeview">
      <li>
        <a data-toggle="collapse" class="collapse1" href=".collapse1-1">Item 1</a>
        <ul class="collapse collapse1-1">
          <li>
            <a data-toggle="collapse" href=".collapse1-1-1">Item 1-1</a>
            <ul class="collapse collapse1-1-1">
              <li>Item 1-1-1
                <ul>
                  <li>Item 1-1-1-1</li>
                  <li>Item 1-1-1-2</li>
                  <li>Item 1-1-1-3</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>Item 1-2</li>
          <li>Item 1-3</li>
        </ul>
      </li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

项目1-1-1

项目1-1-1-1
项目1-1-1-2
项目1-1-1-3




项目1-2
项目1-3


项目2
项目3

---

也许这个问题并不能解决我的问题，因为我明确地说我确实想避免定制JS，并且更喜欢纯引导解决方案。但是我们的朋友@makshh已经用一个html元素解决了我的问题：）谢谢！