Question

我正在使用引导程序列表组，并希望一次只显示三个项目。

<div class="list-group">
    <a href="#" class="list-group-item">First item</a>
    <a href="#" class="list-group-item">Second item</a>
    <a href="#" class="list-group-item">Third item</a>
    <a href="#" class="list-group-item">Fourth item</a>
    <a href="#" class="list-group-item">Fifth item</a>
    <a href="#" class="list-group-item">Six item</a>
</div>

每个列表项的大小可能会有所不同。

如果可以执行任何滑动/折叠操作，请提供帮助。

Answer 1

这是我提出的自定义解决方案。我们基本上使用元素的索引来隐藏第3个之后的任何内容，并使用布尔来切换效果。

DEMO

var hideElements = function(){
    $('#collapse-list a').each(function(i){
        if(i > 2){
            $(this).slideToggle(200);
        }
    });
};

hideElements();
var toggleStatus = true;
$('#toggle-collapse').click(function(){
    if(toggleStatus){
        $('#collapse-list .list-group-item:not(:visible)').slideToggle(200);
    } else {
        hideElements();
    }
    toggleStatus = !toggleStatus;
});

Answer 2

你可以使用boostrap carousel：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner list-group" role="listbox">
      <div class="item active">
        <a href="#" class="list-group-item">1 item</a>
        <a href="#" class="list-group-item">2 item</a>
        <a href="#" class="list-group-item">3 item</a>
      </div>
      <div class="item">
        <a href="#" class="list-group-item">4 item</a>
        <a href="#" class="list-group-item">5 item</a>
        <a href="#" class="list-group-item">6 item</a>
      </div>
      <div class="item">
        <a href="#" class="list-group-item">7 item</a>
        <a href="#" class="list-group-item">8 item</a>
        <a href="#" class="list-group-item">9 item</a>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Fiddle

Bootstrap列表组每次只显示三个项目

2 个答案: