Bootstrap 3 嵌套 UL 折叠系统（无 JS/jQuery）答案

【问题标题】：Bootstrap 3 nested ULs collapse system (without JS/jQuery)Bootstrap 3 嵌套 UL 折叠系统（无 JS/jQuery）
【发布时间】：2016-11-09 22:59:30
【问题描述】：

我正在 bootstrap3 上构建类似“treeview”的东西。但我正在与崩溃系统作斗争。当我扩展父级时没有问题。但是当我尝试扩展一个孩子时，它会扩展它，但也会折叠父级。等等……

这里是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>

这是一个 jsFiddle：https://jsfiddle.net/yL71kopn/

谁能帮我解决这个问题？我希望这里有一个纯粹的引导解决方案，而不是一个自定义的 JS。除非这完全不可能。

干杯！ :)

【问题讨论】：

也许见stackoverflow.com/questions/12323066/…
这个问题并没有解决我的问题，因为我明确表示我确实想避免使用自定义 JS，并且更喜欢纯引导解决方案。但是我们的朋友@makshh 已经用一个 html 元素解决了我的问题 :) 还是谢谢！

标签： twitter-bootstrap-3

【解决方案1】：

使用li标签内的链接，因为当您点击打开Item 1-1时，您也点击了Item 1li。

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

JSFIDDLE

【讨论】：