-3

我在这里创建了一个小提琴

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 个元素并隐藏其余元素，并显示一个链接“显示更多”，当有人点击“显示更多”时，整个列表应该是可见的并且“显示更多” ”链接应该变成“少显示”，反之亦然。

4

3 回答 3

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();
    }
于 2013-09-27T09:44:49.173 回答
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/

于 2013-09-27T09:35:01.587 回答
0

试试这个链接可能对你有用

或多或少的Jquery

更多

于 2013-09-27T09:33:42.373 回答