我想将div(容器)水平折叠为我可以设置的宽度,并隐藏其内容。折叠应该放在左边。将div水平折叠为给定宽度
<div id="container">
<button type="button" id="myButton">click here</button>
<p id="myText">
my text here
</p>
</div>
我想将div(容器)水平折叠为我可以设置的宽度,并隐藏其内容。折叠应该放在左边。将div水平折叠为给定宽度
<div id="container">
<button type="button" id="myButton">click here</button>
<p id="myText">
my text here
</p>
</div>
看到这个小提琴: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'
});
}
});
});
我希望这个网址可以帮助你。尝试这个。 https://www.sanwebe.com/2011/11/horizontal-expand-collapse-using-jquery
,Δε ?你尝试过什么吗? – DaniP
我试图适应/简化这个我的需求,但它只是变得一团糟:http://jsfiddle.net/venkateshwar/8wKxY/2/ – Eddy
我现在有这个http://jsfiddle.net/8wKxY/944/但我不希望边栏完全消失。我如何设置一个值来保持屏幕上的一部分? – Eddy