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

-1

我有一個ul，我只想顯示最初的5個項目。當用戶點擊顯示更多時，顯示其他項目並且鏈接詞彙表更改。然後，當用戶再次點擊時，它會有相反的操作。jquery顯示更多無序列表不起作用

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

來源

2014-06-05 ndesign11

請告訴我問題嗎？ – Andrew

問題是什麼？也許提供HTML –

你能舉個例子嗎？ – Adjit

$(".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/

來源

2014-06-05 20:37:49 isherwood

小提琴更新爲使用OP的列表。 – isherwood

有幾個錯誤。因此，解決這些問題，並給它一個嘗試

，而不是這個

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

使用

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

以及如果條件使用這樣

if (n == 'Show less')

而這種「隱藏」對於「顯示」屬性無效。使用「none」。

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

來源

2014-06-05 20:32:33 Sachin

OP也應該使用'var n = $（this）.html（）'，因爲如果'show-more'是一個類可以有多個，所以它可能會導致不希望的效果 – Adjit

這幾乎可以工作，但它不會隱藏用戶回到第二次並說明少 – ndesign11

您應該啓動該功能時準備好文檔隱藏列表的其餘部分。現在它被點擊時首先隱藏。（如果可以的話）另外。顯示：沒有錯。不顯示：隱藏

來源

2014-06-05 20:40:31

這應該爲你工作：

$(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/

來源

2014-06-05 20:45:17 ackerman

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

回答

相關問題