jquery - 最后一项显示时隐藏显示按钮

Question

我想在点击更多时显示 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();
        }

Answer 1

试试这个方法——

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

Answer 2

当代码运行到if ($('.more_item:hidden:last').is(':visible'))时，动画可能还没有结束，所以你应该在 的回调中编写隐藏代码slideDown，它会在动画结束时运行。

例子：

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

Answer 3

你可以这样做：

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

jsFiddle在这里。

Answer 4

首先，您应该将最后一个if放在 onclick 句柄中。

其次，您不应该检查最后一个是否隐藏，因为它在动画期间是可见的。所以。

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