我如何定位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高於點擊元素的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'); 
});