使用JQuery显示多个按钮，只显示多个列的前5个div

时间：2013-02-28 13:53:55

标签： jquery

如何使用JQuery仅在每列上显示前5次＆amp;一个“更多”＆amp; “less”链接显示更多结果。

我所追求的与hide all li elements and show the first 2 and toggle them by button类似 - 但我需要更多＆amp;显示/隐藏每个医生的所有时间段的链接较少（即：每个医生只需点击一下就可以显示/隐藏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/

4 个答案:

答案 0 :(得分：1)

你走了： http://jsfiddle.net/eqmgy/

您需要添加

            <div class="less"><a href="#">Less</a>
            </div>
            <div class="more"><a href="#">More</a>
            </div>

在每个<li class="timeSlots"></li>

的末尾

和js：

var showMore = function () {
    $(this).find('div').css('display', 'block');

    $(this).find('.more').css('display', 'none');
    $(this).find('.less').css('display', 'block');
    $(this).find('.less').click($.proxy(showLess, $(this)));

};

var showLess = function () {
    $(this).find('div').each(function(index, div) {
        if(index > 5) {
            $(div).css('display', 'none');
        }
    });

    $(this).find('.less').css('display', 'none');
    $(this).find('.more').css('display', 'block');

    $(this).find('.more').click($.proxy(showMore, $(this)));

};

$('.timeSlots').each(function (index, timeslot) {
    $.proxy(showLess, timeslot)();
});

编辑：

让我们自动添加更多/更少，所以当数字＆lt; 5：

$('.timeSlots').each(function (index, timeslot) {
            if(timeslot.find('div').length > 5) {
                 timeslot.append('<div class="more"><a href="#">More</a></div>');
                 timeslot.append('<div class="less"><a href="#">Less</a></div>');
                 $.proxy(showLess, timeslot)();
            }
});

答案 1 :(得分：1)

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

假设您现在的时间如下：

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

你想做点什么：

  1. 如果列表的插槽数超过5个，请隐藏＃5之后的所有内容，然后添加更多链接。
  2. 点击更多链接后，显示＃5之后的所有内容，然后更改为LESS链接
  3. 点击LESS链接后，隐藏＃5后的所有内容并更改回更多链接

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

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

           jQuery(".someClass").children(":gt(4)").hide();

    这将隐藏第5个和更多元素。 然而：这也将隐藏所有其他列表的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>');
        }
    });

    工作示例：http://jsfiddle.net/7PeVj/2/

    最后你需要“连接”更多/更少，以隐藏和适当地显示项目。您需要使用jQuery的on()来附加这些按钮的处理程序，因为它们在页面加载时不会存在。

    再次，在http://jsfiddle.net/7PeVj/4/

    的工作示例

    隐藏和显示您可以使用您在上面的代码中看到的内容。您可以检查并设置MORE列表项的text()，以便在LESS和MORE之间来回切换，并根据需要隐藏显示。

答案 2 :(得分：0)

一种可能的解决方案：

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

答案 3 :(得分：0)

试试这个：

http://jsfiddle.net/rR26n/8 

// hide all times and then show the first 5
var hideTimes = function() {
    $('.timeSlots').each(function () {
        $(this).children('div').hide().filter(':lt(5)').show();
    });
}

// show all times
var showTimes = function() {
    $('.timeSlots > div').show();
}

$('.show').click(function () {
    showTimes();
});

$('.hide').click(function () {
    hideTimes();
});

hideTimes();

以下是一键式示例：http://jsfiddle.net/rR26n/9/

两个示例都需要稍微改进一下，以防止按钮对.appointmentDetails的所有实例起作用。您可以使用ID或类索引来执行此操作。

相关问题
最新问题