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;
});

更新 ** * ** * ** * ** * ** * ** * ** * ** * ** * ****

在.onClick之后，会像：

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

工作？

更新 ** * ** * ** * ** * ** * ** * ** * ** * ** * ****

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

Answer 1

如果我理解你的问题，那么这可能有所帮助：

<强> Demo Fiddle

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

编辑 - 我认为可能有一种更简单的方法可以解决您尝试完成的任务。而不是使用JS动态更新.wrapper我认为从position: absolute中删除.content会更容易。一些填充似乎使它看起来一样。

CSS：

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

    //position:absolute;
}

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

1 个答案: