javascript - 使用内部内容扩展 div

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>

我将它的样式设置为如下图所示。

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

每个容器的高度取决于里面的内容。我尝试制作容器 position:absolute 然后使用 jQuery slideDown,slideUp 方法。但这并不像预期的那样工作，因为当我制作一个容器 position:absolute 时，其他相邻的容器堆叠在左侧。如何使用 css + jquery 实现这种效果。还是仅使用 CSS 可能？

如有必要，将提供容器的当前 CSS。

以下是容器的 fiddle 。我已经添加了整个 css，因为无法过滤出这部分元素所需的确切 css。

fiddle

Answer 1

如果我没猜错，你可以使用 bootstrap 来完成: http://getbootstrap.com/components/#navbar