设置高度后，Bootstrap v3.3.7 面板无法正确折叠答案

【问题标题】：Bootstrap v3.3.7 panel not collapsing correctly after setting the height设置高度后，Bootstrap v3.3.7 面板无法正确折叠
【发布时间】：2022-01-28 00:07:15
【问题描述】：

我正在使用引导程序 3.3.7 面板。当我单击图标向上滑动面板时，一切正常，面板隐藏并且动画流畅。请看下面的例子：

$('.panel-collapse').on('click', function (e) {
        var $this = $(this);


        if (!$this.hasClass('panel-collapsed')) {
            $this.parents('.panel').find('.panel-body').slideUp();
            $this.addClass('panel-collapsed');
            $this.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
        } else {
            $this.parents('.panel').find('.panel-body').slideDown();
            $this.removeClass('panel-collapsed');
            $this.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/5.15.2/css/all.min.css"/>

             <div class="col-sm-6 col-lg-6 col-xl-3">
            <div class="panel panel-primary form-horizontal product-Section-panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1
                        <a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up">                 </i></span></a>
                    </h3>
                </div>
                <div class="panel-body">
                <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                </div>
            </div>
        </div>
            <div class="col-sm-6 col-lg-6 col-xl-3">
            <div class="panel panel-primary form-horizontal product-Section-panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1
                        <a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up">                 </i></span></a>
                    </h3>
                </div>
                <div class="panel-body">
                <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                </div>
            </div>
        </div>

一旦我设置了面板高度，除了向上滑动的面板内容主体之外，它自身的面板不再隐藏，就会出现问题。请参阅以下内容：

$('.panel-collapse').on('click', function (e) {
        var $this = $(this);


        if (!$this.hasClass('panel-collapsed')) {
            $this.parents('.panel').find('.panel-body').slideUp();
            $this.addClass('panel-collapsed');
            $this.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
        } else {
            $this.parents('.panel').find('.panel-body').slideDown();
            $this.removeClass('panel-collapsed');
            $this.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
        }
    });

.product-Section-panel
    { 
        min-height: 280px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/5.15.2/css/all.min.css"/>
        <div class="col-sm-6 col-lg-6 col-xl-3">
            <div class="panel panel-primary form-horizontal product-Section-panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1
                        <a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up">                 </i></span></a>
                    </h3>
                </div>
                <div class="panel-body">
                <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                </div>
            </div>
        </div>
            <div class="col-sm-6 col-lg-6 col-xl-3">
            <div class="panel panel-primary form-horizontal product-Section-panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1
                        <a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up">                 </i></span></a>
                    </h3>
                </div>
                <div class="panel-body">
                <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                </div>
            </div>
        </div>

我目前解决此问题的方法是将面板主体的高度设置为如下<div class="panel-body product-Section-panel">，但动画不再流畅。如何在允许折叠面板和动画流畅的同时设置面板高度。

【问题讨论】：

你为什么要手动操作而不是使用Bootstrap's collapse functions？
@isherwood 设置高度时同样的问题。你能根据我提供的内容提供答案吗
@isherwood 是的，基本上当我设置面板高度时，问题就出现了。因此，当在不设置高度的情况下折叠面板时，面板会很好地折叠并且动画很流畅，但是在设置面板的高度时不会按预期折叠。并且你回答你的问题为什么不使用折叠功能只是尝试了但是同样的问题仍然存在所以只是为了解决这个问题如果没有任何工作我们可以专注于根据提供的代码解决问题而不是更深入地研究你建议的方式当我快速尝试时没有工作

标签： html jquery css twitter-bootstrap

【解决方案1】：

尝试以下方法：

$('.panel-collapse').on('click', function (e) {
        var $this = $(this);
        var prodSectionPanel = $this.parents('.product-Section-panel')
        
        var prodSectionPanelHeight = 0;
        if (!$this.hasClass('panel-collapsed')) {
            $this.parents('.panel').find('.panel-body').slideUp();
            $this.addClass('panel-collapsed');
            $this.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
        } else {
            $this.parents('.panel').find('.panel-body').slideDown();
            $this.removeClass('panel-collapsed');
            $this.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
            prodSectionPanelHeight = '280px';
        }
        document.documentElement.style.minHeight = prodSectionPanelHeight;
    });

.product-Section-panel {
  transition: min-height .4s;
  will-change: min-height;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/5.15.2/css/all.min.css"/>
        <div class="col-sm-6 col-lg-6 col-xl-3">
            <div class="panel panel-primary form-horizontal product-Section-panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1
                        <a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up">                 </i></span></a>
                    </h3>
                </div>
                <div class="panel-body">
                <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                </div>
            </div>
        </div>
            <div class="col-sm-6 col-lg-6 col-xl-3">
            <div class="panel panel-primary form-horizontal product-Section-panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1
                        <a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up">                 </i></span></a>
                    </h3>
                </div>
                <div class="panel-body">
                <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                       <div class="form-group">
             <label class="control-label">Label1</label>
              <input type="text">
                </div>
                </div>
            </div>
        </div>
</body>
</html>

【讨论】：

是的，我已经查看了解决方案。如果只有一个面板，但我面临的问题是连续设置多个面板，它会起作用。当一个人崩溃时。另一个做高度变化
我明白了，您能否编辑您的示例以显示您实际面临的问题？
答案已编辑我做了一个不能完全工作的解决方案，但如果你能提供一个解决问题的方法，如果你看第二个代码 sn-p 会更好，它有两个面板和当你这样做时，你的态度并不完全有效
答案已更新。
是的，我看过你的回答，我自己也做了类似的解决方案，但我仍然面临的问题是你还没有考虑我的朋友是你没有设置最小高度正如我在代码中提到的那样。所以在 CSS 中你需要将 min-height 设置为所有面板的默认高度，除了在 JavaScript 中更新它们