<分区>
标签 javascript jquery html css
我试图在单击时使侧边栏平滑过渡，以便内容包装器也向左过渡。
我就是做不到。
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').hide()
$('.content-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').show();
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: all .7s ease;
margin-bottom: 50px;
background: green;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
transition: left 1s ease;
display: none;
background: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>最佳答案
也许您正在寻找的东西:
我将 position: relative 设置为 #sidebar-right 并仅使用具有相同像素的 right 来使用 进行此移动.content-wrapper
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('right', "-205px");
$('.content-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('right', "0");
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: all .7s ease;
margin-bottom: 50px;
background: green;
position: relative;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
transition: all .7s ease;
background: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>关于javascript - 使用 jquery 更改简单的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49937316/