在 Bootstrap 中折叠时定义最小高度答案

【问题标题】：Define a minimum height when collapsing in Bootstrap在 Bootstrap 中折叠时定义最小高度
【发布时间】：2015-02-03 23:46:04
【问题描述】：

在 Bootstrap 中，我想在它折叠时设置一个高度。通常我想保留使用.collapse.in 类显示的可折叠区域。因此，当它折叠时，它不会将高度设置为零。

折叠前：

折叠后：

【问题讨论】：

所以你想让盒子里面什么都不显示，即一条水平线？另外请添加您的 CSS，以便我们看到您在做什么。
折叠时应该有一些高度（小盒子）。我认为引导折叠方法“.collapse('show')”可以解决这个问题。但我不知道该怎么做。
看这个例子：jsfiddle.net/Flocktome/R6EAW/10 我实际上想设置一个高度而不是它的高度 0。

标签： javascript jquery css twitter-bootstrap-3

【解决方案1】：

更新：

http://jsfiddle.net/R6EAW/1158/

CSS：

#collapseOne{
    min-height:60px
}

JQ：

$('#accordion').on('hidden.bs.collapse', function () {
    $('#collapseOne').removeClass('collapse').css({        
        'overflow': 'hidden',
        'height': '60px'
    })
})

【讨论】：

快完成了。 :) 我只需要一个标签，而不是 3 或 4 个标签。但是当它点击时，它首先得到 0 高度，然后得到 60px 高度。有什么办法可以让高度固定在60px左右。
太棒了。现在它很完美。 :)
这很好，但是在添加.collapse 标签之前，它会在折叠时导致“闪现”隐藏。它需要 CSS 来解决这个问题，在这种情况下，您不妨使用下面来自 @Max Sychov（由我编辑）的纯 CSS 解决方案

【解决方案2】：

由于我需要对多个元素进行此操作，因此我采用了上面@dm4web 的答案并创建了一个更通用的函数，该函数迭代具有.collapse 类和指定min-height 的元素并将逻辑应用于所有元素。

HTML 示例：

<!-- start fully shown, collapse down to 120px !-->
<div id="div1" class="collapse in" style="min-height: 120px;"> ... </div>

<!-- start collapsed at 6em !-->
<div id="div2" class="collapse in collapsed" style="min-height: 6em;"> ... </div>

Javascript 代码：

$(".collapse")
    .filter(function(ix,el){
        // return only the ones with min-height
        return $(el).css("min-height");
    })
    .each(function(ix, el){

        var  $el = $(el)
            // remember the original min-height
            ,minHeight = $el.css("min-height");

        $el.on("hidden.bs.collapse", function(){

            $el.removeClass("collapse")
                .css({
                     "overflow": "hidden"
                    ,"height": minHeight
                })
        });

        // collapse element on load if it has the class .collapsed 
        if ($el.hasClass("collapsed"))
            $el.collapse();
    });

【讨论】：

这个方法很好，因为我们可以在css文件中设置min-height。
我尝试采用这种方法，并且在打开和关闭时效果很好，但是在第一次加载页面时，折叠内容刚刚完全关闭，是否有工作可以使它成为例如 160px 高度时页面加载了吗？
@AleksandarĐorđević 您是否尝试过答案中的第二个 HTML 示例？这正是它的作用：<div id="div2" class="collapse in collapsed" style="min-height: 160px;"> ... </div>

【解决方案3】：

这里没有JS，例子是用SCSS写的

.collapse{
    display:     block;
    visibility:  visible;
    overflow:    hidden;
    min-height:  60px; // whatever you want here
    height:      0; // if you want it to start collapsed, you need this, else remove this

    &.in{
      height: auto;
    }
  }

【讨论】：

很棒的答案，纯 SCSS/CSS
我做了一些修改以使其更通用