Question

我有一个ul，我最初只想显示5个项目。当用户点击显示更多时，显示其他项目并且链接verbaige更改。然后，当用户再次点击时，它具有相反的操作。

<ul class="section-titles">
    <li>Section 01 Title <span>0:00</span> </li>
    <li>Section 02 Title <span>0:00</span> </li>
    <li>Section 03 Title <span>0:00</span> </li>
    <li>Section 04 Title <span>0:00</span> </li>
    <li>Section 05 Title <span>0:00</span> </li>
    <li>Section 06 Title <span>0:00</span> </li>
    <li>Section 07 Title <span>0:00</span> </li>
    <li>Section 08 Title <span>0:00</span> </li>
    <li>Section 09 Title <span>0:00</span> </li>
    <li>Section 10 Title <span>0:00</span> </li>
</ul>

<div class="show-more">Show more</div>

$(".show-more").click(function () {

    var n = $(".show-more").html;

    if (n = 'Show less') {
        $('.section-titles li:nth-child(n+6)').css('display', 'hidden');
        $('.show-more').html('Show more')
    } else {
        $('.section-titles li:nth-child(n+6)').css('display', 'block');
        $('.show-more').html('Show less')
    }
});

Answer 1

$(".show-more").click(function () {
    var n = $(this).html();

    if (n == 'Show less') { // be sure to use a comparison operator here
        $('.section-titles li:gt(4)').hide(); // no need to fiddle with CSS here
        $('.show-more').html('Show more')
    } else {
        $('.section-titles li').show(); // or here
        $('.show-more').html('Show less')
    }
});

http://jsfiddle.net/isherwood/EpZ9J/

Answer 2

有几个错误。所以解决它们并尝试一下

而不是

var n = $(".show-more").html;

使用

var n = $(".show-more").html();

如果条件使用它就像这样

if (n == 'Show less')

这个＆＃34;隐藏＆＃34;不是＆＃34;显示＆＃34;的有效值属性。使用＆＃34;无＆＃34;。

 $('.section-titles li:nth-child(n+6)').css('display', 'none');

Answer 3

这应该适合你：

$( document ).ready(function() {
var maxCollapsed = 5;
var collapsed = false;

$('.collapse').each(function(i) {
    $(this).click(function() {
      toggleLI();
    });
});

function toggleLI() {
    collapsed = !collapsed;
    $('.collapse').each(function(i) {
        $(this).toggleClass('hidden')
    });
    if(collapsed === true){
        $('li').each(function(i) {
            if(i > maxCollapsed-1){
                $(this).addClass('hidden');
            }
        });
    }else {
        $('li').each(function(i) {
            $(this).removeClass('hidden');
        });
    }
}

toggleLI();

}）;

小提琴 - http://jsfiddle.net/ackerman/EJYK7/

Answer 4

当文档准备好隐藏列表的其余部分时，您应该启动该功能。现在它在点击时首先隐藏。（如果它可以工作）也。显示：无正确。不显示：隐藏

jquery显示更多无序列表无法正常工作

4 个答案: