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>

すべてのテキストが非表示になっている場合にのみ、ボトムライン クラスを表示したいと考えています。次の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 に答える