将div水平折叠为给定宽度

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%是）它以动画方式返回初始状态（的if/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