我正在尝试构建一个效果，以便当我单击按钮时，会打开侧边栏并将页面主体向左推。我的按钮正在工作，但是身体没有向左推。这是我的完整代码。我尝试为身体提供更多课程，但没有工作。
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
$('.body-menu').toggleClass('.body-menu-left');
});
})body{
margin:0px;
padding:0px;
font-family: "Helvetica Neue", Helvetica, Arial;
}
#sidebar{
background:black;
width: 370px;
height:100%;
display: block;
position: fixed;
left:-370px;
top:0px;
transition: left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition: left 0.3s linear;
}
ul{
margin:0px;
padding: 0px;
padding-top: 65px;
}
ul li{
list-style: none;
padding-top: 10px;
}
ul li a{
background:black;
border-bottom:1px solid #111;
display: block;
width: 280px;
padding: 10px;
text-decoration: none;
}
#font1{
color:gray;
font-weight: bold;
text-decoration: none
}
#font2{
color:white;
font-weight: bold;
text-decoration: none
}
#sidebar-btn{
display: inline-block;
vertical-align: middle;
width:20px;
height: 15px;
cursor: pointer;
margin:20px;
position: absolute;
top: 0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background:white;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
#title-menu{
color: white;
letter-spacing: 15px;
padding-left: 25px;
}
#title-menu > h2{
padding-left: 20px;
}
/*hover*/
.hvr-underline-from-left {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background-color: white !important;
height: 2px !important;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
right:60;
background-color: white;
}
/*Fliphvr*/
/* Set-up */
/* Container box to set the sides relative to */
.cube {
width: 30%;
padding-left: 20px;
height: 50px;
-webkit-transition: -webkit-transform .10s;
transition: transform .10s; /* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; /* <-NB */
}
/* The two faces of the cube */
.flippety,.flop {
background: black;
height: 50px;
}
/* Position the faces */
.flippety {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
.flop {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
/* Rotate the cube */
.cube:hover {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90º */
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sidebar</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/hover.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body background="https://i.ytimg.com/vi/3bvnoqsvY-M/maxresdefault.jpg">
<div>
<div id="sidebar">
<div id="title-menu"><h2>CRIMINAL</h2></div>
<ul>
<li><div class="cube">
<div class="flippety">
<a href="#" id="font1">HOME</a>
</div>
<div class="flop">
<a href="#" class="hvr-underline-from-left" id="font2">HOME</a>
</div>
</div>
</li>
<li><div class="cube">
<div class="flippety">
<a href="#" id="font1">THE STORY</a>
</div>
<div class="flop">
<a href="#" class="hvr-underline-from-left" id="font2">THE STORY</a>
</div>
</div>
</li><li><div class="cube">
<div class="flippety">
<a href="#" id="font1">CAST & FILM MAKERS</a>
</div>
<div class="flop">
<a href="#" class="hvr-underline-from-left" id="font2">CAST & FILM MAKERS</a>
</div>
</div>
</li><li><div class="cube">
<div class="flippety">
<a href="#" id="font1">GALLERY</a>
</div>
<div class="flop">
<a href="#" class="hvr-underline-from-left" id="font2">GALLERY</a>
</div>
</div>
</li><li><div class="cube">
<div class="flippety">
<a href="#" id="font1">VIDEOS</a>
</div>
<div class="flop">
<a href="#" class="hvr-underline-from-left" id="font2">VIDEOS</a>
</div>
</div>
</li><li><div class="cube">
<div class="flippety">
<a href="#" id="font1">ARE YOU A PSYCHOPATH?</a>
</div>
<div class="flop">
<a href="#" class="hvr-underline-from-left" id="font2">ARE YOU A PSYCHOPATH?</a>
</div>
</div>
</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
不完全确定您要查找的内容，但在下面的代码段中，如果您单击“菜单”的位置，侧边栏将向左移动。这些链接显然会导致您指明
我在https://jsfiddle.net/RachGal/sokq4956/1/
有一个小提琴（不久前）
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
height: 100%
}
#sidebar-wrapper {
margin-left: -150px;
left: 70px;
width: 150px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
.sidebar-nav {
display: block;
float: left;
width: 150px;
list-style: none;
margin: 0;
padding: 0;
}
#page-content-wrapper {
padding-left: 0;
margin-left: 0;
width: 100%;
height: auto;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 150px;
}
#page-content-wrapper {
width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
color: #999;
display: block;
float: left;
text-decoration: none;
width: 150px;
background: #252525;
border-top: 1px solid #373737;
border-bottom: 1px solid #1A1A1A;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
.sidebar_name {
padding-top: 25px;
color: #fff;
opacity: .7;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.content-header {
height: 65px;
line-height: 65px;
}
.content-header h1 {
margin: 0;
margin-left: 20px;
line-height: 65px;
display: inline-block;
}
@media (max-width:767px) {
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
left: 70px;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 150px;
width: 150px;
transition: all .4s ease 0s;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="wrapper" class="active">
<div id="sidebar-wrapper">
<ul id="sidebar_menu" class="sidebar-nav">
<li class="sidebar-brand"><a id="menu-toggle" href="#">Menu </a></li>
</ul>
<ul class="sidebar-nav" id="sidebar">
<li><a href="/index.html">Link1</a></li>
<li><a>link2</a></li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<!-- Keep all page content within the page-content inset div! -->
<div class="page-content inset">
<div class="row">
<div class="col-md-12">
<p class="well lead">Click on the Menu to Toggle Sidebar </p>
</div>
</div>
</div>
</div>
</div>
</body>
希望这有帮助
拉结