如何在点击功能期间将div设为目标，使其不可见？

Question

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

如何修改上述功能以使其正常工作？或者我是以错误的方式接近它？

Answer 1

过滤.module-content - 元素。 offset().left等于所点击元素offset().left的所有元素，以及高于所点击元素offset().top的{​​{1}}的所有元素都会放置在所点击元素的下方。

offset().top