我已经在这个小问题上挣扎了一段时间(我认为是这样)。我尝试结合使用Bootstrap 3列表组和崩溃插件。

我有一个特定的版本正在运行,但是经过一些重构,它似乎再也无法正常崩溃了,尽管我使用的策略与以前相同。我只是将list-group-item类从achor标签移到了其父div标签。问题在于它不能完全“覆盖”我的div(和锚点)。

我能够提取关键部分:

<div class="list-group">
  <a data-toggle="collapse" data-target=".list-things" class="list-group-item active">Things</a>
  <div class="list-group-item list-things in">
        <a href="#">Foo</a>
  </div>
  <div class="list-group-item list-things in">
        <a href="#">Bar</a>
  </div>
  <div class="list-group-item list-things in">
        <a href="#">Baz</a>
  </div>
</div>


要记住的重要一点是,list-group需要直接对其带有list-group-item注释的子级进行“访问”。否则,每个list-group-item都将自己带有“双”边框(border-topborder-bottom),因为它是:first:last子级;如果您在Bootstrap CSS中进行查找,这将使其具有这种行为。

因为Bootply比阅读一些代码更方便,所以这里有一个链接:Bootply。也许显示我最初拥有的东西也很有用(也包括关键的东西):Bootply original

有人知道吗?提前致谢。

最佳答案

下面是我想出的。虽然您的“ Bootply原创”似乎可以正常工作。

主要变化:


data-targethref
在主collapse div中添加了list-things
制成单独的嵌套<div class="list-group-item">



<div class="list-group">
  <a data-toggle="collapse" href=".list-things" class="list-group-item active">Things</a>
    <div class="list-things collapse in">
      <div class="list-group-item">
        <a href="#">Foo</a>
      </div>
    </div>
    <div class="list-things collapse in">
      <div class="list-group-item">
        <a href="#">Bar</a>
      </div>
      </div>
    <div class="list-things collapse in">
      <div class="list-group-item">
        <a href="#">Baz</a>
      </div>
    </div>
</div>



我希望这是您要寻找的。

10-05 20:44
查看更多