jQuery slideToggle - 不推送内容、隐藏内容和填充父 div

Question

我正在使用 Bootstrap 4 卡片，我希望卡片标题充当滑动开关 - 当您单击标题时，它应该向下滑动一个 div 以填充卡片 div 的高度和宽度，并且也不会向下推卡片，并用自己的内容隐藏原始卡片内容。问题是我尝试的一切都解决了一个问题，但没有解决另一个问题:例如我可以让它不通过绝对定位下推内容，但是它的内容将隐藏在卡片内容后面，或者不填充卡片

这与我想要的很接近:

            $(document).ready(function () {
                $(".flip").click(function () {                  
                    $(this).siblings(".panel").slideToggle("slow");
                });
            });
        

            .panel, .flip {
                padding: 5px;
                text-align: center;
                background-color: #e5eecc;
                border: solid 1px #c3c3c3;
            }

            .panel {
                
                padding: 50px;
                display: none;
                
            }
            .flip{
                    cursor:pointer;

            }
            

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="card text-center">
            <div class="card-header flip">      
                Card Header - Click Me
            </div>
            <div class="panel">Hello world!</div>
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some card text here.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            
            <div class="card-footer text-muted">
               Footer
            </div>
        </div>

Answer 1

这是使用绝对定位并进行一些更改的解决方案。我对卡片使用了相对位置，因此面板相对于它是绝对的(而不是整个文档)。还为 .card-body 和 .panel 使用了固定高度，使它们的高度相等。如果你讨厌固定高度，你可以在 DOM 准备好后使用 javascript 使它们的高度相等。此外，如果您在一个页面上有多张卡片，您可能还需要为每张卡片定义一定的高度，因为相对位置不会在文档中占据一席之地。

$(document).ready(function () {
                $(".flip").click(function () {                  
                    $(this).siblings(".panel").slideToggle("slow");
                });
            });

.panel, .flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;

}

.panel {
    padding: 50px;
    display: none;
    position:absolute;
    z-index:2;
    top:50px;
    width:100%;
    height:160px;
}

.flip{
  cursor:pointer;
}

.card-body{
height:160px
}

.card{
position:relative;
top:0;left:0
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="card text-center">
            <div class="card-header flip">      
                Card Header - Click Me
            </div>
            <div class="panel">Hello world!</div>
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some card text here.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            
            <div class="card-footer text-muted">
               Footer
            </div>
        </div>