我想做一个可折叠的右侧边栏。以下是要求：
- 侧边栏有一个动态的宽度，是建立与flexbox;
- 它需要在默认情况下取消折叠，然后点击一个按钮，它会折叠;
- 浏览器需要记住它的状态重新加载;
- 两种状态之间的过渡应该是平稳的;
- 但是当侧边栏在页面重新加载时折叠时不应该有过渡效果。
我对JavaScript/jquery解决方案持开放态度，但我从css和jquery开始。
以下是我到目前为止的工作：
$(function(){
var closesidebar = $('.closesidebar');
var className = "closed";
$(".sidebar").toggleClass(className, localStorage.getItem("aside") === "Y");
if($('.sidebar').hasClass(className)){
closesidebar.addClass('opensidebar');
}
closesidebar.on("click", function(){
$(this).toggleClass('opensidebar');
$('.sidebar').toggleClass(className);
if ($('.sidebar').hasClass(className)) {
localStorage.setItem("aside", "Y");
}
else {
localStorage.removeItem("aside");
}
});
});.section{
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
overflow: hidden;
position: relative;
}
.main {
width: 400px;
flex-grow: 4;
padding:15px 50px;
}
.sidebar {
flex-grow: 1;
width: 200px;
background: #1c1820;
color:white;
transition: all ease-in-out 1s;
padding:15px;
}
.closed{
transform: translateX(100%);
position: absolute;
}
.closesidebar{
width:100%;
}
.closesidebar:before {
content: 'Close';
}
.opensidebar:before {
content: 'Open';
}<div class="section">
<button class="closesidebar"></button>
<div class="sidebar">
<h2>Sidebar</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in augue nec enim facilisis pharetra. In cursus non dui eu convallis. Curabitur faucibus metus a orci placerat, vitae scelerisque augue facilisis. Etiam sagittis molestie ligula in congue. Phasellus euismod ex a risus tincidunt suscipit. Vivamus eu pharetra velit. Nam dignissim ante quis ullamcorper finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed metus vel ipsum facilisis congue. Proin elementum tincidunt turpis in ornare.
</div>
<div class="main">
<h2>Main content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in augue nec enim facilisis pharetra. In cursus non dui eu convallis. Curabitur faucibus metus a orci placerat, vitae scelerisque augue facilisis. Etiam sagittis molestie ligula in congue. Phasellus euismod ex a risus tincidunt suscipit. Vivamus eu pharetra velit. Nam dignissim ante quis ullamcorper finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed metus vel ipsum facilisis congue. Proin elementum tincidunt turpis in ornare.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sed ornare elit. Phasellus nec facilisis augue. Phasellus ullamcorper cursus efficitur. Nulla facilisi. Sed vitae sagittis enim. Nam quis velit vel diam malesuada dignissim. Proin ac porta nulla. Aliquam venenatis vel dui et feugiat. Vestibulum eget convallis lacus, id luctus ante. Proin egestas ipsum massa. Ut aliquam est nisi, ac pulvinar nibh convallis vel. Nulla mi velit, luctus quis hendrerit ut, egestas ut augue. Fusce risus risus, pharetra facilisis porta nec, elementum vel ante. Curabitur in velit tortor. Etiam eu mi tempus neque lacinia malesuada at dictum lacus.
</div>
</div>看看这个jsfiddle：https://jsfiddle.net/cd5t2px8/
大部分的要求都得到了满足，但有些没有，我的问题在于他们：
- 两个状态之间的过渡是不平滑的，因为绝对位置（但我需要它，以便主要内容将调整大小）;
- 当侧边栏折叠时，页面重新加载时会出现从未折叠到折叠状态的过渡效果。
1条答案
按热度按时间f45qwnt81#
有多种方法可以实现您正在寻找的东西，我构建了两种方法来实现相同的效果。
使用Flexbox构建：https://jsfiddle.net/yswqht8v/
使用绝对位置构建：https://jsfiddle.net/xn523kgr/的
它们都有完全相同的HTML和JavaScript
JavaScript：
字符串
超文本标记语言：
型
唯一的区别是他们的CSS，你可以根据需要挑选。
Flexbox CSS：
型
绝对位置CSS：
型