Question

我有一个由div组成的5 * 7网格。我需要在Netflix界面中执行某些操作：当用户单击其中一个div时，下面会显示一个更大的div，宽度设置为父容器的100％，在页面中向下推动下一行。当用户选择关闭它或点击页面中的另一个div时，它需要返回初始配置。

这是最初的情况：

这就是我需要完成的事情：

HTML （Laravel框架）：

<section class="content">
<div class="grid">
    @for ($i = 1; $i <= 35; $i++)
        <div class="gridcell" id="{{ $i }}">
            <h5>Spazio n° {{ $i }}</h5>
            @foreach ($auctions as $auction)
                @if ($auction->position == $i)
                    <img src="{{ $auction->imgUrl }}" alt=" {{ $auction->description }}">
                @endif
            @endforeach
        </div>
    @endfor 
</div>
</section>

CSS ：

.grid {
    width: 100%;
    text-align: center;
}

.gridcell {
    display: inline-block;
    float: left;
    min-height: 150px;
    width: 180px;
    padding: 15px;
    margin: 10px 10px;
    border: 1px solid #000;
    min-height: 180px; 
}

谢谢！

Answer 1

来自https://stackoverflow.com/a/17589996/2884831

的答案

他的jsFiddle：http://jsfiddle.net/XnfJx/

他的回答列在下面

HTML：

<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the first image.
</div>
<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the second image.
</div>
<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the third image.
</div>

的CSS：

div.info
{
    display: none;
}

JS：

$("div.item").click(function (){
    $("div.info").css("display", "none");
    $(this).find("+ div.info").css("display", "block"); 
});

Answer 2

https://jsfiddle.net/cwe03u4j/4/

我试图沿着这些方向做点什么

HTML

<div id="container">
    <div class="col1">1</div>
    <div class="col1">2</div>
    <div class="col1">3</div>
    <div class="col1">4</div>

    <div class="drop"></div>
</div>

CSS

.col1 {
    width: 100px;
    height: 100px;
    border: 1px black solid;
    display: inline-block;
    margin-bottom: 5px;
}

#container {
    width: 420px;
}

.drop {
    height: 100px;
    border: 1px solid black;
    margin-bottom: 5px;
    display: none;
}

JS

$(".col1").on("click", function() {
    var info = $(this).html();
    if ($(".drop").html() == $(this).html() || !$(".drop").hasClass('active'))
        $(".drop").slideToggle().toggleClass('active').html(info);      
    else
        $(".drop").html(info);
});

Javascript - 选择网格元素时显示div

2 个答案: