1

我有这个问题正在杀死我;(

我有以下 HTML，所有文本都被 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;
    })
});

有任何想法吗？提前致谢！

4

1 回答 1

3

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;
  });
});

实例| 资源

或者，提前检查：

$(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;
  });
});

实例| 资源

从JohnFx对这个问题的评论中获得灵感：

示例 1 更新：

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

实例| 资源

示例 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;
  });
});

实例| 资源

于 2013-01-15T22:16:50.120 回答