jQuery顯示更多的無序列表不起作用

Question

我有一個ul，我只想顯示最初的5個項目。 當用戶單擊顯示更多時，將顯示其他項目，並且鏈接詳細說明也會更改。 然后，當用戶再次單擊時，它具有相反的操作。

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

並且此“隱藏”不是“顯示”屬性的有效值。 使用“無”。

 $('.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

當文檔准備好隱藏列表的其余部分時，應啟動該功能。 現在，單擊時它首先隱藏。 （如果可以的話）。 顯示：無正確信息。 不顯示：隱藏