在 bootstrap col 下打开新的 div答案

【问题标题】：Open new div below bootstrap col在 bootstrap col 下打开新的 div
【发布时间】：2020-01-03 18:18:08
【问题描述】：

假设我在引导程序中有下表：

当我点击它时，我想在 col 下方打开一个包含更多信息的 div：

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

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

【问题讨论】：

同理。使用class="col-12 d-none"。在 Javascript 中，您删除 d-none 类。
据我所知，“下拉菜单”一词主要与 select 元素、子菜单和其他显示选项列表的行为相关联。但它不是官方创造的，所以你可以随意称呼它:)。至于你的问题；你可以做几件事。在正确的位置添加col-12，设置col-3 的高度并在创建的空间中放置一个绝对元素，或者尝试使用 CSS Grid？如果您尝试其中一个或您自己中的任何一个，但遇到困难，那么我相信这里的任何人都可以帮助您。但如果没有代码，我们就没什么可做的了。
我将其称为子行或详细信息行。当然，你可以做到。这对 jQuery 来说是微不足道的。你试过什么？所以需要你努力并发布你的进步。至少，发布一个简化的 HTML sn-p。
还表明您是否要生成新元素、填充和显示现有元素或其他内容。

标签： javascript html css bootstrap-4 dropdown

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

【讨论】：