javascript - 'Show More' & 'Show Less' with jQuery for an article website

Question

我试图在用户点击“显示更多”时显示额外的一行文章，我想删除带有“显示较少”的那一行。

我有 4 行文章，但我想从 2 行开始，让用户一次添加一行。
我的 jQuery 可能有点乱，因为我从不同的地方收集了点点滴滴。
我通过删除内容简化了代码。

知道为什么它不起作用吗？

<div class="writing-clips">
  <div class="row">
    <h2>Writing Clips</h2>
  </div>
  <div class="row clip-container li">
    <div class="col span-1-of-4 box" id="story-1" href="#">
      <a href="#">
        content
      </a>
    </div>
    <div class="col span-1-of-4 box" id="story-2">
      <a href="#">
        content
      </a>
    </div>           
  </div>
  <div class="row clip-container clips-2 li">
    <div class="col span-1-of-4 box" id="story-5" href="#">
      <a href="#">
        content
      </a>
    </div>
    <div class="col span-1-of-4 box" id="story-6" href="#">
      <a href="#">
        content     
      </a>
    </div>
  </div>
  <div class="row clip-container clips-3 li">
    <div class="col span-1-of-4 box" id="story-9" href="#">
      <a href="#">
        content
      </a>
    </div>
    <div class="col span-1-of-4 box" id="story-10" href="#">
      <a href="#">
        content   
      </a>
    </div>
  </div>
  <div class="row clip-container clips-4 li">
    <div class="col span-1-of-4 box" id="story-13" href="#">
      <a href="#">
        content
      </a>
    </div>
    <div class="col span-1-of-4 box" id="story-14" href="#">
      <a href="#">
        content 
      </a>
    </div>
  </div>
  </section>
<div class="showmore">showmore</div>
<div class="showless">showless</div>

j查询:

$(document).ready(function(){

  size_li = $(".writing-clips .li").size();
  x=2;
  $('.writing-clips .li:lt('+x+')').show();
  $('.showmore').click(function () {
    x= (x+1 <= size_li) ? x+1 : size_li;
    $('.writing-clips .li:lt('+x+')').show();
  });
  $('.showless').click(function () {
    x=(x-1<2) ? 2 : x-1;
    $('.writing-clips .li').not(':lt('+x+')').hide();
  });

});

CSS:

.writing-clips .li { display: none; }

.showmore {
    cursor: pointer;
    color: green;
}

.showmore:hover { color: blue; }

.showless {
    color: red;
    cursor: pointer;
}

.showless:hover { 颜色:蓝色；

Answer 1

在显示前两行之前你需要隐藏所有行

添加这一行

$('.writing-clips .li').hide();

之前

$('.writing-clips .li:lt('+x+')').show();