Question

我要在超链接上显示接下来的两个列表元素（单击“加载更多”）。

在Jquery中，是否有任何方法可以通过更改css属性来实现。

.row{
    display:none;
}
.row:nth-child(-n+3){
    display:block;
}

<div class="content">
<ol>
<li class="notarow">I'm not a row and I must remain visible</li>
<li class="row">Row 1</li>
<li class="row">Row 2</li>
<li class="row">Row 3</li>
<li class="row">Row 4</li>
<li class="row">Row 5</li>
<li class="row">Row 6</li>
</ol>
</div>

<a href="#" class="load-more">Load more</a>

Answer 1

仅通过jQuery完成显示。

我所做的所有评论都在那里。

// first hide all
$('.row').css('display', 'none')

// how many to show
var display_count = 0;

// function to show
function show(start, end){  
  for(var i=start; i<end ;i++){  
    $('.row').eq(i).css('display', 'block')
  }
}

// bind click event to show between n and n+2
$('.load-more').click(function(event){
  show(display_count, display_count+2);
  display_count +=2;
})
// trigger the first time
.trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<ol>
<li class="notarow">I'm not a row and I must remain visible</li>
<li class="row">Row 1</li>
<li class="row">Row 2</li>
<li class="row">Row 3</li>
<li class="row">Row 4</li>
<li class="row">Row 5</li>
<li class="row">Row 6</li>
</ol>
</div>

<a href="#" class="load-more">Load more</a>

**更新**

使用css('display', 'block')代替.show()应该可以解决<li>是display:list-item的问题。

Answer 2

让您的链接执行此javascript函数，或（最好使用按钮）：

<a href="javascript:showMore()">

然后执行此JS：

var numberShown = 2;
function showMore() {
   //Add any amount you'd like
   numberShown += 2;
   for(var i = 0; i < numberShown; ++i) {
   document.getElementsByClassName("row")[i].style.display = "block";
   }
}

我还没有测试过，希望它能起作用！

Answer 3

这很简单，但是首先将Option Explicit Sub resetRogueRow() Dim lr As Long, nr As Long With Worksheets("sheet2") lr = .Cells.Find(What:="*", _ After:=.Cells(1), _ LookAt:=xlWhole, _ LookIn:=xlFormulas, _ SearchOrder:=xlByRows, _ SearchDirection:=xlPrevious, _ MatchCase:=False).Row nr = .Cells.Find(What:="*", _ After:=.Cells(lr, 1), _ LookAt:=xlWhole, _ LookIn:=xlFormulas, _ SearchOrder:=xlByRows, _ SearchDirection:=xlPrevious, _ MatchCase:=False).Row .Cells(nr + 1, "A").Resize(lr - nr, 1).EntireColumn.Clear End With End Sub更改为<a>或带有onclick的内容（同样，此解决方案不包含jquery）：

<button>

然后，具有以下脚本：

<button class="load-more" onclick="loadMore()"></button>

未经测试，但您应该了解一下

单击显示下两个列表元素

3 个答案: