Question

以某种方式，当单击按钮时，我的项目列表不会显示更多或更少。

首先，您应该看到3个项目和带有“ +”的按钮。然后，当您单击“ +”时，其他项目应显示，然后在单击“-”时，项目再次限制为3个项目。

$(document).ready(function () {
  var x = $("#list .content"),
      y = "<span class='present'>+</span>";
  x.find("a").length > 3 && (x.toggleClass("div_hide"), x.append(y)),
  $(".present").click(function () {
    $(this).parent().toggleClass("div_hide"), "-" == $(this).text() 
      ? $(this).html("+") 
      : $(this).html("-")

#list .div_hide a:nth-child(n+3) {
  display: none !important;
}
span.present {
  display: block;
  color: black;
  background: yellow;
}

<h1>List</h1>
  <div id="list">
    <a class="content" href="#">one</a>
    <a class="content" href="#">two</a>
    <a class="content" href="#">three</a>
    <a class="content" href="#">four</a>
    <a class="content" href="#">five</a>
    <a class="content" href="#">six</a>
  </div>

Answer 1

我根据您的代码制作了一个动态示例。

ObservableCollection<Student> _students = new ObservableCollection<Student>();

您可以根据需要拥有任意数量的内容元素

public class StudentViewModel
{
    public ObservableCollection<Student> Students { get; set; } = new ObservableCollection<Student>();

    public void LoadStudents(string query)
    {
        Students.Clear();

        SP.ClientContext ctx = clientContext._clientContext;

        SP.CamlQuery qry = new SP.CamlQuery();
        qry.ViewXml = query;
        SP.ListItemCollection splStudents =  ctx.Web.Lists.GetByTitle("Students").GetItems(qry);
        ctx.Load(splStudents);
        ctx.ExecuteQuery();

        foreach (SP.ListItem s in splStudents)
        {
            Students.Add(new Student { Title = (string)s["Title"], FullName = (string)s["FullName"] });
        }
    }
}

https://jsfiddle.net/ahentea/jwLhd7o2/

Answer 2

看看这个，我已经用jquery做到了

$(document).ready(function () {
        var x = $("#list .content"),
            y = "<span class='present'>+</span>";
           $("#list .content:last-child").after(y);
           
             $(".content").each(function(index){
                 if(index>=3){
                  $(this).addClass('toBeshow dNone');
                 }
             });
            $(document).on('click', '.present', function(){
              $(".toBeshow").toggleClass('dNone');
            });
                });

span.present {
    display: block;
    color: black;
    background: yellow;
}
.dNone{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>List</h1>
    <div id="list">
      <a class="content" href="#">one</a>
      <a class="content" href="#">two</a>
      <a class="content" href="#">three</a>
      <a class="content" href="#">four</a>
      <a class="content" href="#">five</a>
      <a class="content" href="#">six</a>
    </div>

单击时，项目列表不会显示越来越多的项目

2 个答案: