分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了通过使用JQuery显示更多按钮,仅显示多个列中的前5个div，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我如何使用 JQuery仅在每列上显示前5次&一个“更多”& “less”链接显示更多结果.

我所追求的是类似于@L_301_1@ – 但我需要更多&显示/隐藏每个医生的所有时间段的链接较少(即：每个医生只需点击一下就可以显示/隐藏7列以上的所有时间).

– 这就是现在看来的时间 –

– 这是我正在寻找的结果 –

<div class="appointmentDetails">
  <div class="staffInfo">
    <div>Dr John Doe</div>
  </div>
  <div class="appointmenTinfo">
    <ul>
      <li>
        <div></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">09:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">09:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </div>
</div>
<div class="appointmentDetails">
  <div class="staffInfo">
    <div>Dr Tom Smith</div>
  </div>
  <div class="appointmenTinfo">
    <ul>
      <li>
        <div></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </div>
</div>

– 这是我的HTML / JAVASCRIPT / CSS的现场演示 –

http://jsfiddle.net/rR26n/

解决方法

在我们进入“解决方案”之前：您的标记不是非常语义.您正在显示一个时间列表,因此时间应该在列表中,而不是DIV.这些列表可以左侧浮动或内联阻塞,您可以摆脱标记中的大量错误.

假设你现在在列表中有你的时间：

<ul class="timeList">
   <li class="timeSlot">8:00</li>
   <li class="timeSlot">9:00</li>
   ...
   <li class="timeSlot">18:00</li>
</ul>

你想做一些事情：

>如果列表包含5个以上的插槽,请隐藏#5之后的所有内容,然后添加更多链接.
>单击更多链接时,显示#5之后的所有内容,然后更改为LESS链接
>单击LESS链接时,隐藏#5之后的所有内容并更改回MORE链接

我建议使用jQuery,如果你还没有,因为它使事情变得更容易,所以我对如何做这些事情的建议使用它.

对于数字1,您可以在某个索引之后隐藏元素,如下所示：

jQuery("@L_609_28@meClass").children(":gt(4)").hide();

这将隐藏第五个和更多元素.但是：这也会隐藏所有其他列表的LI,因为上面的代码将每个列表的所有子节点放在一个大集合中,然后在第5个元素之后隐藏它们ALl.所以你要做的就是迭代每个列表并只隐藏它的孩子.

我在这里创建了一个例子,将它们变成红色而不是隐藏它们,这样你就可以直观地看到发生了什么：

jQuery(function () {
    jQuery(".timeList").each(function () {
        jQuery(this).children(":gt(4)").css('color','red');
    });
});

你可以在这里看到它：http://jsfiddle.net/7PeVj/

对于#2,您需要检查每个列表是否超过5,并添加更多链接.由于我们已经遍历每个列表,我们可以在那里实现该代码.你可以使用子结果的长度来查看你是否有超过5,然后使用jQuery的append()函数添加一个按钮.

这是一个例子.请注意,我们现在只要求孩子们是timeSlots

jQuery(".timeList").each(function () {
        // reference to the list
        var tHelist = jQuery(this);
        // reference to it's LIs that have .timeSlot
        var kids = tHelist.children(".timeSlot");
        // manipulate after element 5
        kids.filter(":gt(4)").css('color','red');
        //add a MORE link if we have more than 5
        if (kids.length > 5) {
            tHelist.append('<li class="slotMoreLess">MORE</li>');
        }
    });