隐藏显示按钮，当最后一项显示

我想表现出对更多的点击eavry more_item和隐藏更多的时候最后一项显示隐藏显示按钮，当最后一项显示

<ul class="home_projects"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li class="more_item">4</li> 
     <li class="more_item">5</li> 
     <li class="more_item">6</li> 
    </ul> 

    <a href="#" class="more">more</a>

使用jQuery

$(".more_item").hide(); 
     $(".more").click(function() { 
     $(".more_item:hidden:first").slideDown("slow"); 
     }); 
    if ($('.more_item:hidden:last').is(':visible')){ 
    $(".more").hide(); 
     }

来源

2013-07-30 Sam

这里有什么问题？ –

当最后一项显示时隐藏更多的按钮 – Sam

您可以更多更多 –

试试这个办法 -

$(".more_item").hide(); 
$(".more").click(function() { 
    $(".more_item:hidden:first").slideDown("slow",function(){ 
     if ($('.more_item:hidden').length === 0){ 
     $(".more").hide(); 
     } 
    }); 
});

演示------>http://jsfiddle.net/cjHp7/

来源

2013-07-30 09:55:39

谢谢，但它不工作因为它显示为列表项目 – Sam

@Sam看演示'---->'http://jsfiddle.net/cjHp7/ –

谢谢，它的工作很好 – Sam

当代码运行到if ($('.more_item:hidden:last').is(':visible'))时，动画可能还没有完成，因此您应该在slideDown的回调中编写隐藏代码，它将在动画完成时运行。

例子：

$(".more_item").hide(); 
     $(".more").click(function() { 
     $(".more_item:hidden:first").slideDown("slow",function(){ 
     $(".more").hide(); 
    }); 
});

来源

2013-07-30 09:55:59 jarvanJiang

你可以这样来做：

$('.more').on('click', function() { 
    if ($('.more_item:hidden').length > 0) { 
    $('.more_item:hidden:first').slideDown('slow'); 
    } else { 
    $(this).hide(); 
    } 
});

的jsfiddle here。

来源

2013-07-30 09:58:04 skz

首先，你应该把最后的if放在onclick句柄中。

其次你不应该检查最后是否隐藏，因为它在动画过程中是可见的。所以。

$(".more_item").hide(); 
$(".more").click(function() { 
    $(".more_item:hidden:first").slideDown("slow"); 
    if ($('.more_item:last').is(':visible')){ 
     $(".more").hide(); 
    } 
});

来源

2013-07-30 09:58:33

隐藏显示按钮，当最后一项显示

回答

相关问题