CSS3 + JQuery的 - 畫廊了slideDown

Question

我目前正在深化發展我公司的網站，並在畫廊節，管理者希望這樣的設計：

不幸的是，我不知道我可以這樣做...我試圖搜索谷歌，但我沒有找到任何東西。

它會是這樣的，當你點擊另一個.item時，它會關閉當前打開的物品並打開新的物品......箭頭應該在物品下方，以此爲中心。此外，當您點擊鏈接時，如果打開它，則會關閉「彈出式下方」（類似於彈出式窗口，但在下方而不是在...上方）。

我知道我的jQuery代碼將是這樣的：

$('.item a').click(function(e) { 
    if ($(this).parent().hasClass('open')) { 
     $(this).parent().removeClass('open'); // which would slide the details up 
    } else { 
     var $id = $(this).data('item-id'); 
     getItemDetail($id); 
    } 
    e.preventDefault(); 
}); 

這裏我將使用爲例HTML：

<div class="container"> 
    <div class="projects"> 
     <div class="item"> 
      <a href="#item" data-item-id="exempleid" class="item-link"> 
       <img src="" alt="item"> 
      </a> 
      <!-- HERE GOES THE DETAIL-PANE --> 
     </div> 
    </div> 
</div> 

如果有人對我怎麼能做到這一點的想法， 我會很感激！

Answer 1

經過2個小時的搜索龐大的Google數據庫，我終於找到了解決方案！

下面的鏈接：http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

這正是我想要的！感謝所有提示@Nathan Lee！

Answer 2

我上的jsfiddle扔東西在一起：http://jsfiddle.net/8TfCZ/4/

這並不是因爲什麼在從OP的答案的文章鏈接demo'd漂亮，但它可以作爲一個起點的另一種方式，如果有人決定破解自己的。

JS：

(function($) { 

    // Display a 'popover' below a element 
    var displayMenu = function(el) { 

     // Display location = (el's position + its height + 1px border) 
     var bottomOfEl = $(el).offset().top + $(el).height() + 1 + 'px'; 

     // Add bottom margin to parent <ul> equivalent to popover height 
     $(el).parent().addClass('active'); 

     // Display popover 
     $('#popover') 
      .hide() 
      .css({ 
       'height': '0', 
       'top': bottomOfEl 
      }) 
      .show() 
      .animate({'height': '80px'}, 'fast'); 
    }; 


    $(document.body).on('click', '.item', function(e) { 
     // Close all others .item elements 
     $('.item').not(this).removeClass('open'); 

     // Remove bottom margin from all other .item-lists 
     $('.item-list').not($(this).parent()).removeClass('active');   

     // Open this 
     $(this).addClass('open'); 

     // Display popover relative to this element 
     displayMenu(this); 
    }); 
})(jQuery); 

HTML：

<div id="popover" class="popover"></div> 

<ul class="item-list"> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
</ul> 

<ul class="item-list"> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
</ul> 

CSS：

.popover { 
    display: none; 
    position: absolute; 
    width: 100%; 
    height: 80px; 
    background: blue; 

} 

.item-list { 
    padding: 0; 
    width: 100%; 
} 

.item-list.active { 
    margin-bottom: 80px; 
} 

.item { 
    position: relative; 
    list-style-type: none; 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    border: 1px solid #000; 
    text-align: center; 
    padding-right: 5px; 
    cursor: pointer;  
} 

.item:before { 
    content: '.item';  
} 

.item.open:before { 
    content: '.open';  
} 

.item.open:after { 
    content: ''; 
    position: absolute; 
    width: 0; 
    height: 0; 
    bottom: 0px; 
    left: 50%; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid blue; 
    margin-left: -10px; 
}