javascript - 我如何定位 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-elements 。offset().left 等于被单击元素的 offset().left 且 offset().top 高于的所有元素被点击元素的 offset().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');
});