Question

我想将div（容器）水平折叠到我可以设置的宽度，从而隐藏其内容。倒塌应该在左边。

    <div id="container">
    <button type="button" id="myButton">click here</button>
    <p id="myText">
my text here
    </p>
</div>

JSFDDLE HERE

Answer 1

看到这个小提琴：http://jsfiddle.net/100pvu95/19/

侧边栏有position: relative（默认为0/0）。单击切换时，left将动画显示为-55％，这样可以保持侧边栏的一部分仍然可见。当它再次被点击时（位于left: -55%）它会动画回到初始状态（如果/ else条件+两个动画）：

HTML：

<div id="sidebar">
  SIDEBAR
  <button id="toggle">Toggle</button>
</div>

CSS：

    $(document).ready(function () {
    $("#toggle").on('click', function () {
        var x = $("#sidebar").css("left");
    if(x == '0px') {
        $("#sidebar").animate({
            left: '-55%'
        });
        } else {
        $("#sidebar").animate({
            left: '0'
        });
        }        
    });
});

Answer 2

我希望这个网址能为您提供帮助。试试这个。 https://www.sanwebe.com/2011/11/horizontal-expand-collapse-using-jquery

将div水平折叠到给定宽度

2 个答案: