Question

我在第一个网站的问题似乎是一个非常简单和非常常见的问题，通常发布在互联网上，称为“显示更多”文字。但我真正想要的是完全不同的。首先我有html元素与嵌套元素而不是纯文本。其次我想知道所有剩下的隐藏元素，但是以3个元素或4个元素左右请考虑以下示例

<div class = "outer" >

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>
  ------above elements to show by default when page loads------

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

------这三个点击“显示更多”------

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

------这三个再次点击“显示更多”------

  and so on until all the elements are not finished.

</div>

现在这也非常平易近人，但如果我们必须在多个级别上执行此操作，该怎么做？意味着我们将div与外部div一起移动如下

<div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>
    <div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>
    <div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>

Answer 1

这是适用于您的方案的可行解决方案： http://jsfiddle.net/4C3AM/

var itemsCount = 0,
itemsMax = $('.outer div').length;
$('.outer div').hide();

function showNextItems() {
    var pagination = 3;

    for (var i = itemsCount; i < (itemsCount + pagination); i++) {
        $('.outer div:eq(' + i + ')').show();
    }

    itemsCount += pagination;

    if (itemsCount > itemsMax) {
        $('#showMore').hide();
    }
};

showNextItems();

$('#showMore').on('click', function (e) {
    e.preventDefault();
    showNextItems();
});

Answer 2

你可以给容器div一个唯一的ID，这样你就可以用javascript来获取它，你可以使用javascript并将css类应用到元素中。以下CSS示例将首先隐藏元素。

CSS：

.outervisible{display:block;}
.outerhidden{display:none;}

HTML：

<div id = "outer1" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>....<button onClick="showsomething('outer2')">show more</button> 

</div>
    <div id = "outer2" class="outerhidden" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>

//等

然后我们可以编写一个javascript函数来更改包含div的类，允许我们在单击按钮时显示它。

<script>
function showsomething(pageid){
    document.getElementById(pageid).className = "outervisible";
}
</script>

请注意，您需要做的不仅仅是复制粘贴我的示例，但我希望您能了解它背后的想法并将其解决。

Answer 3

好的，我自己已经弄明白了，这就是我做到的。 http://techbrush.org/show-more-text-to-work-as-pagination/但我相信有更聪明，更清洁的方法可以做到这一点。如果你有，请发布。感谢。

在javascript或jquery中显示更多按钮以作为分页

3 个答案: