Question

首先，我是jQuery / JS的新手，所以请提前感谢您的帮助。很多天我一直试图找到解决以下问题的方法：我有一个列表，它由多个无序列表和自己的项目组成。我想要的只是显示所有UL项目的前5个列表项目，并且只有在单击“加载更多”链接时，才会显示其余的列表项。请参阅printscreen以获得澄清： http://i61.tinypic.com/swabnq.jpg 我知道如何使用一个UL来完成此操作，但不能使用多个。

我已经拥有以下代码：

<div class="col-lg-12">
<div class="category-overview">
    <div class="content-title">
        <h3 class="pull-left">Our products</h3>
        <span class="pull-right">
            <a href="#" class="title-toggle-control"></a>
        </span>
    </div>
    <div class="clearfix"></div>
    <div class="grey-divider"></div>
    <div class="clearfix"></div>

    <div class="col-xs-4 col-sm-3 col-md-3">
        <div class="category-overview-list">
            <h4>Title1</h4>
            <ul class="list">
                <li><a href="#">List item 01</a></li>
                <li><a href="#">List item 02</a></li>
                <li><a href="#">List item 03</a></li>
                <li><a href="#">List item 04</a></li>
                <li><a href="#">List item 05</a></li>
                <li><a href="#">List item 06</a></li>
                <li><a href="#">List item 07</a></li>
            </ul>
        </div>
    </div>
    <div class="col-xs-4 col-sm-3 col-md-3">
        <div class="category-overview-list">
            <h4>Title2</h4>
            <ul class="list">
                <li><a href="#">List item 01</a></li>
                <li><a href="#">List item 02</a></li>
                <li><a href="#">List item 03</a></li>
                <li><a href="#">List item 04</a></li>
                <li><a href="#">List item 05</a></li>
                <li><a href="#">List item 06</a></li>
                <li><a href="#">List item 07</a></li>
            </ul>
        </div>
        etc...
    </div>
</div>
<div class="clearfix"></div>

和JS代码：

$('.category-overview-list ul').each(function (i) {
    var ul = $(this),
        l = ul.children('li'),
        h = l.height();
    ul.css({ 'height': (h * 5) + 'px', 'overflow': 'hidden' });
    $(this).siblings('.control').addClass('closed');
    $(this).siblings('.control').html('<a href="#">show more <i class="fa fa-plus"></i></a>');
});
$('.control').click(function () {
    var ul = $(this).parent().children("ul"),
        l = ul.children('li'),
        h = l.height();
    var me = $(this);
    if (me.is('.closed')) {
        ul.parent().children("ul").animate({
            'height': (ul.height() > (h * 5) ?
            (h * 5) : (l.length * h)) + 'px'
        });
        me.removeClass('closed');
        me.addClass('open');
        $(this).html('<a href="#">show less <i class="fa fa-minus"></i></a>');
    } else {
        //ul.css({'height':(h*3)+'px','overflow':'hidden'});
        ul.animate({ 'height': (h * 5) + 'px', 'overflow': 'hidden' });
        me.removeClass('open');
        me.addClass('closed');
        $(this).html('<a href="#">show more <i class="fa fa-plus"></i></a>');
    }
    return false;
});

我真的希望有人可以帮我解决这个问题。

Answer 1

这是一个工作小提琴：http://jsfiddle.net/avGZt/3/

我使用的解决方案如下：

您可以尝试使用CSS隐藏LI，如下所示：

/* It's n+6 because it starts at 1, rather than 0 */
.closed ul.list li:nth-child(n+6) {
    display: none;
}

然后要显示它们，让处理程序将类应用于所有UL的父级：

$('.control').click(function () {
    $('.category-overview').toggleClass('closed');
});

你不需要两个单独的课程，这有点矫枉过正，而且切换起来要容易得多。您还可以使用＆＃34;显示更多＆＃34;按钮也会改变CSS，如下所示：

.closed .control.less { display: none; }
.closed .control.more { display: block; }
.control.more { display: none; }

当然，假设您创建两个＆＃34;显示更多/更少＆＃34;的按钮。

现在，这可能不是最漂亮的解决方案，它可能会使用一些改进，但我认为你会发现它比使用javascript强制一切发生更清晰。

Answer 2

Working fiddle

用css添加了默认高度，点击后我运行jquery来获取所有ul标签并增加高度。

我没有使用您的任何javascript代码，我不知道他们是否发生冲突或者您是否在其他地方使用它

$('#show_more').click(function() {
    $(".category-overview" ).find( "ul" ).height(100);
});

New fiddle here with dynamic height 编辑：将其更改为使用％。例如。第一个ul有9个元素=＆gt;更长=＆gt;全部显示9个！

Answer 3

您可以为任何元素切换类以显示/隐藏它们。我要做的是使用

在元素中添加一个类

.hide{display:none}

然后，当您第一次加载页面时，列表中任何超过5的元素，您应该添加 hide 类：

<div class="category-overview-list">
        <h4>Title1</h4>
        <ul class="list">
            <li><a href="#">List item 01</a></li>
            <li><a href="#">List item 02</a></li>
            <li><a href="#">List item 03</a></li>
            <li><a href="#">List item 04</a></li>
            <li><a href="#">List item 05</a></li>
            <li class="hide"><a href="#">List item 06</a></li>
        <li class="hide"><a href="#">List item 07</a></li>
    </ul>
</div>

现在，当您单击控制按钮时，您的代码应如下所示：

$('.control').click(function () {
    var ul = $(this).parent().children("ul"),
    var me = $(this);
    if (me.is('.closed')) {
        me.removeClass('closed hide');
        me.addClass('open');
        $(this).html('<a href="#">show less <i class="fa fa-minus"></i></a>');
    } else {
        me.addClass('closed hide').removeClass('open');
        $(this).html('<a href="#">show more <i class="fa fa-plus"></i></a>');
    }
return false;
});

Answer 4

试试这个

$('.list').each(function(){
        var liLength = $(this).find('li').length;
        var max = 6;        
        if (liLength > max) { 
          $(this).find('li:gt('+max+')').hide();
           $(this).parent().append($('<li class="addMoreList">load more</li>').click(function(){ 
                $(this).siblings('li:hidden').show();
            })
          );

        }

    });

jQuery只显示多个无序列表的5个列表项

4 个答案: