时间戳

首页 > 解决方案 > 单击时显示下两个列表元素

javascript - 单击时显示下两个列表元素

问题描述

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

有没有办法通过更改 css 属性在 Jquery 中实现这一点。

.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>

标签： javascriptjquerycss

解决方案

使您的链接执行此 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";
   }
}

我还没有测试过，我希望它有效！

推荐阅读