Question

我必须显示5行文字，一行在另一张下面，如下所示：

1）第一行 2）第二行
3）三号线 4）第四行 5）第五行

但是特别要求只显示前两行，并且有某种jquery魔法可以隐藏第3-5行，并在用户点击向下箭头或类似控件时显示它们。我怎么能这样做？

由于

Answer 1

你需要这样的东西： HTML：

<ul>
   <li class="line">Line one</li>
   <li class="line">Line two</li>
   <li class="line">Line three</li>
   <li class="line">Line four</li>
   <li class="line">Line five</li>
   <li class="showMore">Show More</li>
</ul>

CSS：

.line:nth-child(n+3) {
   display:none;
}
.showMore{
  cursor:pointer;
  font-size:12px;
  color:blue;
}

JQuery的：

$(document).ready(function() {
  $('.showMore').click(function() {
      $('ul li:gt(1)').show();
      $(this).hide();
  });
});

Answer 2

您可以通过两种方式进行操作。 1-只显示2行，单击“更多”触发“更多”，使用jquery加载3行的其余部分并显示全部5行。

2-打印所有5但是将div的高度设置为仅出现2.点击更多更改高度，如从25px到100px。

使用Jquery展开具有其内容预览的div

2 个答案: