Question

我使用bootstrap创建了以下div结构。 html标记如下。

<section class='content-wrapper order-summary-wrapper'>
        <div class="container">
            <div class="row">
                <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 order-summary-details">
                    <div class="row">
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                            <div>
                                <h4>Delbetalning Engångskostnad</h4>
                                <p>150kr/mån</p>
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                            <h4>Abonnemang</h4>
                            <p>199kr/mån</p>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                            <div class='price-container-wrapper'>
                                <div class='price-container'>
                                    <h4>Månadskostnad</h4>
                                    <p>199kr</p>
                                </div>
                                <div class='clearfix'></div>
                                <div class='price-container price-container-padding'>
                                    <h4>Bindingstid</h4>
                                    <p>0 mån</p>
                                </div>
                                <div class='clearfix'></div>
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                            <div class='price-container'>
                                <h4>Månadskostnad</h4>
                                <p>199kr</p>
                            </div>
                            <div class='clearfix'></div>
                            <div class='price-container price-container-padding'>
                                <h4>Bindingstid</h4>
                                <p>0 mån</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                    <a href="#" class="learn-btn order-btn order-gray wow fadeInUp animated" style="visibility: visible;">Rensa</a>
                    <a href="#" class="learn-btn order-btn order-green wow fadeInUp animated" style="visibility: visible;">Beställ</a>
                </div>
            </div>
        </div>
    </section>

我在下面的模型中看起来像是样式。

mockup

现在我要做的是当我点击每个箭头图标时，相应的框应该如下所示展开。

mockup

每个容器的高度取决于内部的内容。我已尝试制作容器position:absolute，然后使用jQuery slideDown，slideUp方法。但是这不能按预期工作，因为当我在左边创建一个容器position:absolute时，其他相邻的容器堆栈。我怎样才能使用css + jquery来实现这种效果。或者只能用CSS？

如有必要，

将提供容器的当前CSS。

以下是容器的小提琴。我添加了整个css，因为无法过滤掉这些元素所需的确切css。

fiddle

Answer 1

如果我找对你，你可以用bootstrap做到： http://getbootstrap.com/components/#navbar

Answer 2

我道歉但我没有时间意识到所有人的想法。

我可以快速向您展示可行的方式，您必须对其进行调整并使其更好。

尝试将此添加到您的小提琴中： CSS：

.col-xs-3{
    border:2px solid black;
    overflow:hidden;
    max-height:50px;
    -webkit-transition:max-height 0.4s ease 0s;
    -moz-transition:max-height 0.4s ease 0s;
    transition:max-height 0.4s ease 0s;
}
/*
.col-xs-3:hover{
    max-height:400px;    
}
*/

JS :(这是vanilla js no-jquery） - 确保你选择＆＃34;没有包装 - ＆lt;头＆gt; ＆＃34; - 小提琴的上/下

window.addEventListener("load",function(e){
    var m = document.getElementsByClassName("col-xs-3");
    for(var i=0; i<m.length; i++){
        m[i].isOpen = false;
        m[i].addEventListener("click",function(e){
            if(this.isOpen){ this.style.maxHeight = "60px"; this.isOpen = false; }
            else{ this.style.maxHeight = "400px"; this.isOpen = true; }
        },false);
    };
},false);

使用内部内容扩展div

2 个答案: