jQuery slide切换 - 不推送内容、隐藏内容和填充父 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，以使其高度相等。如果您讨厌固定的高度，则可以使用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>

Answer 2

最大高度属性是您所需的。这是我用您的代码所做的。我对您的dom-tree进行了一些编辑，但它的工作原理就像您描述的！:)也许我已经误解了您的问题。

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

            .panel, .flip{
                padding: 5px;
                text-align: center;
                background-color: #e5eecc;
                border: solid 1px #c3c3c3;
            }
            .panel{
                width: 100%;
                height: 100%;
                display: none;
            }
            .card-content{
                overflow: hidden;
                max-height: 180px;
            }
            .card-body{
                width:100%;
                height:180px;
            }
            .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="card-content">
                <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>
            
            <div class="card-footer text-muted">
               Footer
            </div>
        </div>