jquery 切换隐藏和切换显示

Question

我正在尝试加载前 10 个 element.and 剩余元素显示后点击更多。我正在使用 stack overflow solution.you 可以看到这里。 jQuery load first 3 elements, click "load more" to display next 5 elements。现在我正在尝试做一些改变。 1:I 想要显示 10 个元素然后查看更多标签。与 tootle 隐藏和显示。 2:when load more button click then show all li elements and after all li element loaded, Load more button changes show less button and load more button hide.and 当点击时显示较少。 show less 会隐藏，load more 按钮会显示。

<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^ :

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

#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;
}

<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>

jquery 切换隐藏和切换显示

jquery toggle hide and toggle show

javascript

jquery

toggle