Question

我希望在点击更多时显示更多项目，并在最后一项显示时隐藏更多项目

    <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 here。

Answer 4

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

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

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

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

4 个答案: