单击列表元素时如何打开 100% 宽度的 div（使用 bootstrap/Sass/Js）答案

【问题标题】：How to open a 100% witdh div when click on an element of the list (bootstrap/Sass/Js using)单击列表元素时如何打开 100% 宽度的 div（使用 bootstrap/Sass/Js）
【发布时间】：2016-12-03 09:17:37
【问题描述】：

我很绝望，我需要你的帮助......

图片多于文字： here what I wanna do

我想显示一个带有背景图像的列表（每行 3 个），当我单击一个时，我想打开一个包含所单击图像描述的 div。我希望这个 div 做父容器的 100% 宽度。当dis打开时，下面被推下，关闭时被推上......我希望它能够响应。问题是我不知道该怎么做......！！！！我什至没有在另一个网站上找到我想要的示例！

我正在使用 bootstrap、sass、js/jquery。如果您有任何想法，请帮助我:'(因为我尝试的所有方法都没有奏效:'(

【问题讨论】：

你能告诉我们你的代码吗？
我找到了这个但不是我想要的see example
这是我的代码，但没关系，我找到了解决方案，谢谢

标签： jquery html css sass

【解决方案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>

【讨论】：

感谢您的帮助，我找到了类似的东西，但对响应式不好：see example

【解决方案2】：

https://github.com/codrops/ThumbnailGridExpandingPreview

这是解决方案（来自 codrops 的代码和演示）

【讨论】：