1

jQueryを使用して、表示ボタンをクリックしたときに一度にli5を表示したいと思います。

これが私のコードです：

<button class="show">show</button>
<ul>
    <li id="Li0">0</li>
    <li id="Li1">1</li>
    <li id="Li2">2</li>
    <li id="Li3">3</li>
    <li id="Li4">4</li>
    <li id="Li5">5</li>
    <li id="Li6">6</li>
    <li id="Li7">7</li>
    <li id="Li8">8</li>
    <li id="Li9">9</li>
    <li id="Li10">10</li>
    <li id="Li11">11</li>
    <li id="Li12">12</li>
    <li id="Li13">13</li>
    <li id="Li14">14</li>
    <li id="Li15">15</li>
</ul>

スクリプトは次のとおりです。

$(".show").click(function(){
    $("ul > li:lt(' + (index - 5) + ')+ ").addClass('active');
});

cssは次のとおりです。

ul li{
    display:none;
}
.active{
    display:inline;
}
4

3 に答える 3

3 
$(".show").click(function () {
    $("ul li").not(".active").slice(0, 5).addClass("active");
});​

デモ。

于 2012-04-12T14:18:50.313 に答える
2 
$(".show").click(function () {
    $("ul li").not(":visible").slice(0, 5).slideDown();
    if($("ul li").not(":visible").length == 0)
         $(this).hide();
});​

http://jsfiddle.net/9Z5Jr/4/

于 2012-04-12T14:23:11.010 に答える
1

あなたの与えられたCSSで。

これを試して

$(".show").click(function() { 
  $("ul li:not(.active):lt(5)").addClass('active'); 
});

http://jsfiddle.net/ceehn/

于 2012-04-12T14:24:41.730 に答える