内部DIV展开/折叠后，周围DIV的设置高度

Question

我有一个简单的手风琴。 我想做的是，例如，当单击内容中的某个项目（如何联系我们）时，隐藏的后续文本将被扩展。 展开后，将计算content DIV的新高度。 然后将此新计算的content DIV高度分配给.wrapper的高度。 然后，红色包装纸应包围整个包装盒。

请参阅小提琴： http : //jsfiddle.net/oampz/jLQf4/1/

HTML：

<div class="wrapper">
    <ul class="panel">
        <li>
            <div class="heading">   <a>Menu 1</a>

            </div>
            <div class="content">
                <ul>
                    <h2>Top Ten Questions</h2>
                    <li>    
                        <a href="">How to reach us</a>
                        <p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <a href="">How to email us</a>
                        <p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <a href="">Contact Number</a>
                        <p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

CSS：

.heading {
    color: white;
    font-weight: bold;
    padding: 15px 0 15px 20px;
    background: grey;
}
.content {
    background: #99CCFF;
    position: absolute;
}
.hide {
    display: none;
}

.wrapper {
    background: #FFD1E0;
    position: relative;
}

jQuery的：

$(".content ul li a").click(function () {
  var $this = $(this);
  $this.next(".content ul li a").show(400);
  $this.parent().siblings().children().next().hide();
  return false;
});

UPDATE ** * ** * ** * ** * ** * ** * ** * ** * ** * ****

.onClick之后，将是：

$(".wrappper").css({'height':($(".content").height()+'px')});

工作？

UPDATE ** * ** * ** * ** * ** * ** * ** * ** * ** * ****

更新的小提琴： http : //jsfiddle.net/oampz/jLQf4/9/

Answer 1

如果我正确理解了您的问题，那么这可能会有所帮助：

演示小提琴

您的content div没有指定的宽度，因此它会自动换行其中的任何内容，当您显示文本时，它会比最初延伸得更远。

编辑 -我认为可能会有更简单的方法来解决您要完成的任务。 我认为，与其使用JS动态更新.wrapper从.content删除position: absolute会更容易。 一些填充似乎使它看起来相同。

CSS：

.content {
    width: 280px;
    background: #99CCFF;
    padding: 10px 0;

    //position:absolute;
}