带有链接的嵌套组列表（可折叠）答案

【问题标题】：Nested Group Lists (Collapsable) with Links带有链接的嵌套组列表（可折叠）
【发布时间】：2016-04-25 07:45:04
【问题描述】：

从这篇文章继续 https://stackoverflow.com/a/33571268/4218990

我需要修改哪些内容才能在项目上创建链接？我尝试添加 div 而不是 a-Elements，但链接不起作用。

原创

  <div class="list-group list-group-root well">
  <a href="#item-1" class="list-group-item" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i>Item 1
  </a>
  <div class="list-group collapse" id="item-1">
    <a href="#item-1-1" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
    </a>
    <div class="list-group collapse" id="item-1-1">
      <a href="#" class="list-group-item">Item 1.1.1</a>
      <a href="#" class="list-group-item">Item 1.1.2</a>
      <a href="#" class="list-group-item">Item 1.1.3</a>
    </div>
   </div>
  </div>

带有 div 和链接

  <div class="list-group list-group-root well">
  <div href="#item-1" class="list-group-item" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i>
    <a href="www.someURL.de">Item 1</a>
  </div>
  <div class="list-group collapse" id="item-1">
    <div href="#item-1-1" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>
      <a href="www.someURL.de">Item 1.1</a>
    </div>
    <div class="list-group collapse" id="item-1-1">
      <div href="#" class="list-group-item">
       <a href="www.someURL.de">Item 1.1.1</a>
      </div>
      <div href="#" class="list-group-item">
       <a href="www.someURL.de">Item 1.1.2</a>
      </div>
      <div href="#" class="list-group-item">
       <a href="www.someURL.de">Item 1.1.3</a>
      </div>
    </div>
   </div>
  </div>

编辑：奇怪的是，它在 JSFiddle https://jsfiddle.net/xjcobm3y/2/ 的最后一级运行得非常好

【问题讨论】：

除了链接不起作用之外，div 的工作是否代替了 a 元素？如果是这样，请尝试在 a 元素上设置 display:block
感谢您的回复！不幸的是，问题普遍存在于 display:block 和 display:inline
你能说清楚问题是什么吗？
链接 <a href="www.someURL.de">Item 1</a> 和链接 <a href="www.someURL.de">Item 1.1.1</a> 不可点击，不会让我访问 www.someURL.de
然后你需要考虑：你想要什么可以点击来切换下一个要展开的子列表；以及您希望可点击以访问该网址的内容。目前，您已将“list-group-item”设置为切换下一层，“list-group-item”还包含您要导航到的超链接。也许让 V 形成为下一个子列表的切换器，然后将超链接分开

标签： html twitter-bootstrap-3

【解决方案1】：

也许让雪佛龙成为下一个子列表的切换器，并且然后将超链接分开 -Anthony

所以我就是这样做并想通了 - 请参阅更新的小提琴https://jsfiddle.net/vwaorkpm/2/

<div class="just-padding">
  <div class="list-group list-group-root well">
    <div class="list-group-item">
      <i href="#item-1" class="glyphicon glyphicon-chevron-right" data-toggle="collapse"></i>
      <a style="display:inline-block" href="www.someURL.de">Item 1</a>
    </div>
    <div class="list-group collapse" id="item-1">
      <div class="list-group-item">
        <i href="#item-1-1" class="glyphicon glyphicon-chevron-right" data-toggle="collapse"></i>
        <a href="www.someURL.de">Item 1.1</a>
      </div>
      <div class="list-group collapse" id="item-1-1">
        <div href="#" class="list-group-item">
          <a href="www.someURL.de">Item 1.1.1</a>
        </div>
        <div href="#" class="list-group-item">
          <a href="www.someURL.de">Item 1.1.2</a>
        </div>
        <div href="#" class="list-group-item">
          <a href="www.someURL.de">Item 1.1.3</a>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：