如何開一家100％witdh格時單擊列表（引導/無禮/ JS使用）的元素

Question

我desesperated和我對打需要你的幫助......

爲圖片超過字： here what I wanna do

我想顯示一個背景圖像列表（每行3個），當我點擊一個，我想打開一個包含單擊圖像的描述的div。我想這個div做父容器的100％寬度。當dis開放時，下面的內容被推下來，並在關閉時推高...並且我希望這是響應式的。問題是我不知道該怎麼做...... !!!!我什至沒有找到我想要在另一個網站上的例子！

我正在使用bootstrap，sass，js/jquery。如果你有任何想法，請幫助我：'（因爲我所嘗試的都沒有工作：'（

Answer 1

我不完全確定你的最終目標是在這裏，但這裏有一個解決方案，將有3個錨標籤，下面一個隱藏的div。當點擊一個錨，它會描述發送至低於div和顯示它。默認情況下，一個div將是100％的寬度的塊。

<style type="text/css"> 
    section > div > a { 
     width: 33.3%; 
     display: block; 
    } 
    section .description { 
     display: none; 
    } 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('section > div > a').click(function(e){ 
     e.preventDefault(); 
     var desc_block = $(this).closest('section').find('description'); 
     desc_block.html($(this).data('description'); 
     desc_block.show();  
    }); 
} 
</script> 
<section> 
    <div> 
     <a data-description="Your description to show below"></a> 
     <a></a> 
     <a></a> 
    </div> 
    <div class="description"></div> 
<section> 

Answer 2

https://github.com/codrops/ThumbnailGridExpandingPreview

這裏是解決方案（代碼和演示來自codrops）