Question

我有这个问题，这让我很伤心;（

我有以下HTML，所有texto都被css隐藏

<p><b><a class="titulo" href="#">Title</a></b></p>
<div class='texto'><p>Some text</p></div>

<p><b><a class="titulo" href="#">Title</a></b></p>
<div class='texto'><p>Some text</p></div>

<p><b><a class="titulo" href="#">Title</a></b></p>
<div class='texto'><p>Some text</p></div>

<div class='callToAtion bottomline'>
<a class="btnMeInteresa" href="#">Me interesa</a>
<a href="#">No, gracias</a> 
</div>

我希望仅在隐藏所有texto时显示底线类。我有以下jquery，但不起作用：

$(document).ready(function(){
    $('.titulo').click(function(){
        $($(this).closest('p').next()).slideToggle();

        if ($('.texto:visible').length === 0){
            $('.bottomline').show();
        }
        else {
            $('.bottomline').hide();
        }
        return false;
    })
});

有什么想法吗？提前谢谢！

Answer 1

slideToggle是一个动画，所以你必须等到它结束才能确定是否有任何可见：

$(document).ready(function(){
  $('.titulo').click(function(){
    $(this).closest('p').next().slideToggle(function() {
      if ( $('.texto:visible').length === 0)
      {
          $('.bottomline').show();
      }
      else
      {
          $('.bottomline').hide();
      }
    });     
    return false;
  });
});

Live Example | Source

或者，提前检查：

$(document).ready(function(){
  $('.titulo').click(function(){
    var texto = $(this).closest('p').next();
    var targetCount = texto.is(":visible") ? 1 : 0;
    var last = $('.texto:visible').length === targetCount;
    texto.slideToggle();
    if (last)
    {
        $('.bottomline').show();
    }
    else
    {
        $('.bottomline').hide();
    }
    return false;
  });
});

Live Example | Source

从JohnFx对这个问题的评论中汲取灵感：

示例1已更新：

$(document).ready(function(){
  $('.titulo').click(function(){
    $(this).closest('p').next().slideToggle(function() {
      $('.bottomline').toggle(!$('.texto').is(':visible'));
    });     
    return false;
  });
});

Live Example | Source

示例2已更新：

$(document).ready(function(){
  $('.titulo').click(function(){
    var texto = $(this).closest('p').next();
    var targetCount = texto.is(":visible") ? 1 : 0;
    var last = $('.texto:visible').length === targetCount;
    texto.slideToggle();
    $('.bottomline').toggle(last);
    return false;
  });
});

Live Example | Source

隐藏时Jquery显示

1 个答案: