Jquery切换位置绝对底部

Question

我有一个absolute定位的容器，bottom已对齐。

现在我希望toggle（显示/隐藏）某些内容，而容器的内容不会大于其内容 - 最好不要明确设置高度。

HTML

<div id="outer">
    <div class="expandableContent">
        <p class="toggler">Toggle</p>
        <div>
            <p>Some content here</p>
            <p>Some content there</p>
            <p>Some content everywhere</p>
        </div>
    </div>
</div>

CSS

#outer {
     height: 300px;
     position: relative;
}

.expandableContent {
    position: absolute;
    bottom: 10px;
}

 .expandableContent > div {
     display: none;
 }

jquery的

$(document).ready(function () {
    $('.toggler').click( function() {
        $(this).next().toggle(1000);
    });
});

这是一个链接：http://jsfiddle.net/SunnyRed/A8pNv/1/

Answer 1

您无需设置高度...只是可扩展div的宽度。我已经在你的jsfiddle中为你修改了这个。

我唯一做的就是：

 .expandableContent {
    position: absolute;
    bottom: 10px;
    width:200px;
}

Answer 2

width: 100%;
white-space:nowrap;

添加上面包含文本的div。
xGreen是正确的，设置宽度将起作用，但某些浏览器也需要禁用文本换行。一个例子是Chrome，只是设置宽度是不够的。

Answer 3

看看这个，现在很优雅。

正在使用 demo