单个页面上的多个列表组，但每个列表组允许唯一的选择

Question

我想在我的页面上有三个单列列表组，并允许用户 select 每个组中的一个项目。但是，列表组都是链接在一起的，我一直无法弄清楚如何将它们保持为单独的列表组。

我设置了一个快速 Plunker link here 这样你就可以看到我正在尝试做什么。

我也不确定为什么列表的每一列都被前一列偏移了。

这是我正在玩的 HTML，我试图找出如何做到这一点：

<div class="container">
    <h3>
        Select one from each column.
    </h3>

    <div>
      <h3 class="list-group-item-heading">Select Opp</h3>
    </div>
    <div id="oppname" class="col-md-4 list-group">
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Aelia
            </a>
      </div>
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Del Monte
            </a>
      </div>
    </div>

    <div>
      <h3 class="list-group-item-heading">Select Id</h3>
    </div>
    <div id="oppid" class="col-md-4 list-group">
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Id: 1724
            </a>
        <div class="no-margin">
          <a href="#" class="list-group-item">
                Id: 1675
            </a>
        </div>
      </div>
    </div>

    <div>
      <h3 class="list-group-item-heading">Select Size</h3>
    </div>
    <div id="oppsize" class="col-md-4 list-group">
      <div class="no-margin">
        <a href="#" class="list-group-item">
                Size: 24
            </a>
        <div class="no-margin">
          <a href="#" class="list-group-item">
                Size: 75
            </a>
        </div>
      </div>
    </div>

</div>

感谢您的帮助！

Answer 1

是的，默认分组不起作用，这很奇怪。

这是Fiddle

中的解决方案

<div class="list-group">
  <a href="#" class="list-group-item">One</a>
  <a  href="#" class="list-group-item">Two</a>
  <a  href="#" class="list-group-item">Three</a>
</div>

<div class="list-group">
  <a  href="#" class="list-group-item">One</a>
  <a  href="#" class="list-group-item">Two</a>
  <a  href="#" class="list-group-item">Three</a>
</div>
<div class="list-group">
  <a  href="#" class="list-group-item">One</a>
  <a  href="#" class="list-group-item">Two</a>
  <a  href="#" class="list-group-item">Three</a>
</div>

并添加这个兄弟 js 来像这样进行选择

$('body').on('click', '.list-group a', function (e) {
   $(this).addClass('active');
   $(this).siblings().removeClass('active');
});

和中提琴。

单个页面上的多个列表组，但每个列表组允许唯一的选择

Multiple list-groups on a single page, but each list-group allows an unique selection

html

twitter-bootstrap-3