1

コード例: http://codepen.io/asuh/pen/JgdLK

これは、私が取り組んでいるレスポンシブ デザイン用です。列の量は、ブレークポイントとこのブレークポイントでの div の幅に応じて変化します

いずれかの div をクリックすると、非表示のコンテンツが、その親に対して絶対的に配置された div に表示されます。リンクでいっぱいのドロップダウンとして機能します。

この例では、アクティブなドロップダウンの下にあるコンテナーをターゲットにして、そのコンテナーまたはそれらのコンテナーをフェードアウトまたは非表示にする必要があります。現在、コンテナ ボックスの影がドロップ ダウンの端から見えるようになっていますが、完全にまたはほとんど見えないようにしたいと考えています。

JS は次のとおりです。

$('.module article').each(function() {
    $(this).hide();
});
$('.module-content').click(function() {
  var $this = $(this).closest('section').find('article');
  $('.module article').not($this).slideUp();
  $this.slideToggle('slow').addClass('active');
});

私はこのようなことを試み続けていますが、うまくいきません:

if($('.module article').hasClass('active')) {
     $('.module:nth-child(3)').fadeTo('fast',0);
}

上記を変更して機能させるにはどうすればよいですか？それとも、間違った方法でアプローチしていますか？

4

1 に答える 1

3

.module-content-elements をフィルタリングします。クリックされた要素のとoffset().left等しく、クリックされた要素のより大きいすべての要素は、クリックされた要素の下に配置されます。offset().leftoffset().topoffset().top

    $('.module-content').click(function() {
  var offset=$(this).offset();
   var $this = $(this).closest('section').find('article');
  $('.module article').not($this).slideUp();
  $('.module-content').parent().css('visibility','visible');
  if($this.is(':hidden'))
  {$('.module-content')
    .filter(function(){return ($(this).offset().left==offset.left 
                                && $(this).offset().top>offset.top);})
      .parent().css('visibility','hidden');}

  $this.slideToggle('slow').addClass('active');
});
于 2012-09-26T23:55:12.483 に答える