Question

我在here

创造了一个小提琴

HTML

<ul class="lia-list-standard" id="list_2">
    <li class="label even-row">            <a href="10031/label-name/new" id="link_418" class="label-link lia-link-navigation">New<wbr></wbr></a>
        <span class="label-count">1</span><span> Threads</span>

    </li>
    <li class="label odd-row">            <a href="/10031/label-name/Rohan" id="link_419" class="label-link lia-link-navigation">Rohan<wbr></wbr></a>
        <span class="label-count">1</span><span> Threads</span>

    </li>
    <li class="label even-row">            <a href="10031/label-name/Rahul" id="link_420" class="label-link lia-link-navigation">Rahul<wbr></wbr></a>
        <span class="label-count">1</span><span> Threads</span>

    </li>
    <li class="label odd-row">            <a href="10031/label-name/Preet" id="link_421" class="label-link lia-link-navigation">Preet<wbr></wbr></a>
        <span class="label-count">1</span><span> Threads</span>

    </li>
    <li class="label even-row">            <a href="10031/label-name/Singh" id="link_422" class="label-link lia-link-navigation">Singh<wbr></wbr></a>
        <span class="label-count">1</span><span> Threads</span>

    </li>
    <li class="label odd-row">            <a href="10031/label-name/Random" id="link_423" class="label-link lia-link-navigation">Random<wbr></wbr></a>
        <span class="label-count">2</span><span> Threads</span>

    </li>
    <li class="label even-row">            <a href="10031/label-name/Member" id="link_424" class="label-link lia-link-navigation">Member<wbr></wbr></a>
        <span class="label-count">2</span><span> Threads</span>

    </li>
</ul>

的Javascript

$(function(){

    $('.label-count').each(function() {
        $(this).after($('<span>').text(" Threads"));
    });

    $('.label-count').text(function(_, text) {
        return text.replace(/\ ( | \) / g, '');
    });
    }
});

我的要求是，在列表之外，我只需显示4个元素并隐藏其余元素，并显示链接“显示更多”，当有人点击“显示更多”时，整个列表应该是可见的， “显示更多”链接应变为“显示更少”，反之亦然。

Answer 1

我将把你的其他JS实现留给你，但是对于你指定的功能，你可以通过添加这样的东西来实现

<button id="hide-list-btn" style="display:none">Show More</button>

<style>
.hidden-list-item {
    display:none;
}
</style>

<script>
$(document).ready(function() {
    var show_limit = 4;
    $('.lia-list-standard li').each(function(){
        if ($(this).index() >= show_limit) {
            $(this).addClass('hidden-list-item');
            $('#hide-list-btn').show();
        }
    });

    $('#hide-list-btn').click(function(){
        $('.hidden-list-item').toggle();
        $('#hide-list-btn').text($('#hide-list-btn').text() == 'Show More' ? 'Show Less' : 'Show More')
    });
});
</script>

例如：http://jsfiddle.net/4YvaP/29/

Answer 2

我修改了jsfiddle：http://jsfiddle.net/4YvaP/33/

最简单的方法是：
1.添加“显示更多”和“显示更少”div 2.将事件处理程序绑定在这些div上 3.根据列表大小显示/隐藏适当的div。

摘自jsfiddle：

$('.show-more').on('click', function(){
       $('.lia-list-standard li:gt(3)').show();
       $('.show-less').removeClass('hidden');
       $('.show-more').addClass('hidden');
    });

    $('.show-less').on('click', function(){
       $('.lia-list-standard li:gt(3)').hide();
       $('.show-more').removeClass('hidden');
       $('.show-less').addClass('hidden');
    });

    //Show only four items
    if ( $('.lia-list-standard li').length > 4 ) {
        /*$('.lia-list-standard li:gt(3)').hide();
        $('.show-more').removeClass('hidden');
        */

            $('.show-less').click();
    }

Answer 3

尝试此链接可能对您有用

More or less Jquery

Jquery more

使用Jquery限制List中的元素数量

3 个答案: