javascript - 在 bootstrap col 下方打开新的 div

Question

假设我在 Bootstrap 中有下表:

我想在单击它时在 col 下方打开一个包含更多信息的 div:

这可能与 css/javascript 相关吗？我试过 Metro Dropdown但打开的 div 受到 col-3 宽度的限制。我也尝试在 css 中设置此 div 的宽度，但我似乎无法达到与所附图片类似的结果。

这种行为的名称是什么？它似乎是一个将波纹管组件向下推的“下拉菜单”。我该如何做这样的事情？

Answer 1

正如我上面提到的，您的问题中缺少一些规范。这是一个尝试。如果它不合时宜，请更详细地更新您的问题并发表评论。

$(document).ready(function() {
    let counter = 1;

    $('.container-fluid').fadeIn();

    $('.col-12').click(function() {

        // slide up existing detail row with animation, then remove it
        $(this).closest('.row').find('.detail').slideUp(400, function() {
            $(this).remove();
        });

        // create and append a new row with animation
        let detailEl = $('<div class="col-12 detail hidden">' + counter + '</div>');
        $(this).closest('.row').append(detailEl)
        detailEl.slideDown();

        counter++;
    });
});

.row {
    border-bottom: 2px solid #ddd;
}

.col-12,
.detail {
    height: 30px;
    background: pink;
}

.detail {
    background: lightgreen;
    transition: background 1s;
}

.detail+.detail {
    background: darkgreen;
}

.hidden {
    display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid hidden">
    <div class="row">
        <div class="col-12"></div>
    </div>

    <div class="row">
        <div class="col-12"></div>
    </div>
</div>

Fiddle demo