jQuery 如果某些东西大于值，则隐藏并添加一个按钮来显示隐藏的内容？

发布于 2024-08-29 08:55:47 字数 449 浏览 2 评论 0原文

正如我的标题所说，这就是我现在遇到的问题。

我正在检查 div 中 php 打印的链接数量，如果超过 10 个，我想隐藏它们并添加一个按钮，显示“阅读更多”，然后显示其余链接。

        $(document).ready(function() {

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

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

});

    });

这就是我对代码的了解。

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

最好的问候，

查理

原文

Exactly what my title says is the problem Im having right now.

Im checking a div for how many links php printed and if there is more than 10 Id like to hide them and add a button that says read more and then it show the rest of the links.

        $(document).ready(function() {

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

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

});

    });

this is how far I got with the code.

Ill be happy to hear every tip and trick you guys can help me with!

Best Regards,

Charlie

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冰火雁神 2024-09-05 08:55:47

您可以做一些相当简单的事情，如下所示：

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

You could do something fairly straightforward like this:

$(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();
    });
});

This hides any children over index 4, meaning it only shows 5 at once. If it hid any, it adds a "Show All" link...clicking this shows the hidden ones and removes the "Show All" link itself.

You can test how this works here: http://jsfiddle.net/hxrde/

回复收藏 0 原文

撩发小公举 2024-09-05 08:55:47

$('#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();
}

$('#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();
}

回复收藏 0 原文

盗心人 2024-09-05 08:55:47

Charlie，

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

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

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

Charlie,

Simply add the ":gt(4)" to the hideAll function for the siblings:

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

And thanks for the code. Works great!

回复收藏 0 原文

~没有更多了~