带链接的嵌套组列表(可折叠)

时间:2016-01-19 17:42:12

标签: html twitter-bootstrap-3

继续这篇文章 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/

的最后一级完美无缺

1 个答案:

答案 0 :(得分:2)

  

也许让雪佛龙成为下一个子列表的切换者   然后将超链接分开--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>