Question

我正在尝试加载前10个元素。点击更多后剩下的元素显示。我正在使用堆栈溢出解决方案。你可以在这里看到。 jQuery load first 3 elements, click "load more" to display next 5 elements。现在我想做一些改变。 1：我想显示10元素，然后查看更多标签。与tootle hide和show。 2：当加载更多按钮时单击然后显示所有li元素并且在所有li元素加载之后，加载更多按钮更改为显示更少按钮并加载更多按钮隐藏。当单击显示更少时。显示较少将隐藏和加载更多按钮将显示。

<ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty one</li>
    <li>Twenty two</li>
    <li>Twenty three</li>
    <li>Twenty four</li>
    <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

jquery的

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});

CSS

#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
}
#showLess:hover {
    color:black;
}

Answer 1

与下面相同^ O ^：

＆＃13;

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=10;
    $('#myList li:lt('+x+')').show();
    if (size_li > 10) {
        $('#loadMore').show();
    }
    $('#loadMore').click(function () {
        $('#myList li, #showLess').show();
        $(this).hide();
    });
    $('#showLess').click(function () {
        $('#showLess, #myList li').hide();
        $('#loadMore, #myList li:lt('+x+')').show();
    });
});

＆＃13;

#myList li{ display:none;
}
#loadMore {
    display: none;
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    display: none;
    color:red;
    cursor:pointer;
}
#showLess:hover {
    color:black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty one</li>
    <li>Twenty two</li>
    <li>Twenty three</li>
    <li>Twenty four</li>
    <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

＆＃13;

jquery切换隐藏和切换显示

1 个答案: