0

ロード時に最初の 3 つを除くすべてを非表示にし、クリックするとすべてに展開したい長い順序付けられていないリストがあります。

これまでの私のjQueryは次のとおりです。

$('#myList').find('li:gt(3)').addClass('togglr').hide().end().append(
    $('<li class="show_more_btn">Read more »</li>').click(function(){
        $(this).siblings('.togglr').toggle();
        if ($(this).hasClass('expanded')){
            $(this).text('View All');
            $(this).removeClass('expanded');
        } else{
            $(this).text('View Less');
            $(this).addClass('expanded');
        }
    });

そして私のhtml：

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>

ここに jsFiddle があります: http://jsfiddle.net/t2jrZ/

どこが間違っていますか？

4

1 に答える 1

2

あなたはほとんどそこにいました！考えすぎかもしれません(;_;)

現在のコードのprobは、});現在のスクリプトの最後にあり、それを次のように置き換えます}));

HTML

<ul id="info">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>
<button type="button" onclick="showAll();">Show All</button>

Javascript:

var limit = 3;
$('#info li:lt(' + limit + ')').show();
$('button').click(function(){
     $('#info li').show();
});

http://jsfiddle.net/t2jrZ/2/

于 2013-02-27T03:03:47.877 に答える