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在DOM准备好之后使它们的高度相等。此外，如果页面上有多张卡片，您可能还需要为每张卡片定义一定的高度，因为相对位置不占据文档中的位置。

＆＃13;

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

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

Answer 2

Max-height属性是您所需要的。这是我用你的代码做的。我编辑了你的DOM树，但它的工作方式与你描述的一样！ :)或者我可能误解了你的问题。

            $(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>

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

2 个答案: