Jquery 切换位置绝对底部

发布于 2024-11-30 09:51:34 字数 1015 浏览 0 评论 0原文

我有一个绝对定位的容器，它是底部对齐的。

现在我想切换（显示/隐藏）一些内容，而容器不会大于其内容 - 并且最好不要显式设置高度。

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/

原文

I've got an absolute positioned container, which is bottom aligned.

Now I would like to toggle (show/hide) some content without the container getting larger than its contents - and preferably without setting the height explicitly.

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

Here's a link: http://jsfiddle.net/SunnyRed/A8pNv/1/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放手` 2024-12-07 09:51:34

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

我唯一做的就是：

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

You don't need to set the height...just the width of the explandable div. I have modified this for you in your jsfiddle.

The only thing i did was:

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

回复收藏 0 原文

蓝海似她心 2024-12-07 09:51:34

width: 100%;
white-space:nowrap;

将上面的内容添加到包含文本的 div 中。

xGreen 正确地设置了宽度，但某些浏览器还要求禁用文本换行。以 Chrome 为例，仅设置宽度是不够的。

width: 100%;
white-space:nowrap;

Add the above the the div containing the text.

xGreen is correct that setting the width will work, but some browsers with also require text-wrapping to be disabled. An example would be with Chrome, just setting the width is not enough.

回复收藏 0 原文