jQuery如果某些东西超过了值,那么隐藏并添加一个按钮来显示隐藏的内容?

时间:2010-04-15 15:40:35

标签: jquery hide show

我的标题正是我现在所遇到的问题。

我正在检查一个div,显示php打印了多少链接,如果有超过10个Id喜欢隐藏它们,并添加一个按钮,说明更多,然后显示其余的链接。

        $(document).ready(function() {

     var newsRss = $('#rssNews >li').length;
     var driftRss = $('#rssDrift >li').length;

        $(window).load(function() {
            if(newsRss > 10)
     alert(newsRss);

});

    });

这是我对代码的了解程度。

我很高兴听到你们可以帮助我的每一个提示和技巧!

最诚挚的问候,

查理

3 个答案:

答案 0 :(得分:2)

你可以像这样做一些相当简单的事情:

$(function() {
    $("#rssNews, #rssDrift").each(function() {
        if($(this).children(":gt(4)").hide().length)
            $(this).append("<li class='showAll'>Show All</li>");
    });
    $(".showAll").live('click', function() {
        $(this).siblings().slideDown();
        $(this).remove();
    });
});​

这会隐藏任何超过索引4的孩子,这意味着它只会同时显示5个。如果它隐藏了任何内容,它会添加一个“全部显示”链接...单击此按钮显示隐藏的链接并删除“全部显示”链接本身。

您可以在此处测试其工作原理:http://jsfiddle.net/hxrde/

答案 1 :(得分:1)

$('#rssNews >li').slice(10).addClass("hidemore").hide();
if ($(".hidemore").length > 0) {
  //add your button to the dom here, 
  //and in its click event put:
  // $(".hidemore").show();
}

答案 2 :(得分:1)

查理,

只需将“:gt(4)”添加到兄弟姐妹的hideAll函数中:

 $(".hideAll").live('click', function() {
    $(this).siblings(":gt(4)").slideUp();
    $(this).parent(0).append("<a class='showAll'>Show all</a>");
    $(this).remove();
});

感谢您的代码。效果很好!