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 。所有 aoffset().left等于被点击元素的offset().left且 aoffset().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');
});
于 2012-09-26T23:55:12.483 回答