通过使用JQuery显示更多按钮,仅显示多个列中的前5个div

Question

如何使用JQuery仅显示每列的前5次以及"更多"和"更少"链接以显示更多结果.

我所追求的类似于隐藏所有li元素并显示前2个并按钮切换它们 - 但我需要更多和更少的链接来显示/隐藏每个医生的所有时间段(即:更多/更少的链接应该显示/隐藏每个医生的7列上的所有时间,只需点击一下).

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

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

- 我的HTML代码 -

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

Answer 1

一种可能的解决方案：

$timeSlots = $('.timeSlots');
$timeSlots.each(function() {
    var $times = $(this).children();
    if ($times.length > 5) {
        $timeSlots.children(':nth-of-type(n+6)').hide();
        $(this).append('<span class="more-times">+More</span>');
    }
});

$timeSlots.on('click', '.more-times', function() {
    $(this).prevAll().show().end().remove();
});

只需在 上运行此代码即可DOMready。

http://jsfiddle.net/dfsq/rR26n/6/