Question

我希望在我的页面上有三个单列列表组，并允许用户从每个组中选择一个项目。但是，列表组都是链接的，我无法弄清楚如何将它们保存为单独的列表组。

我设置了一个快速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');
});

和Viola。

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

1 个答案: