<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
我正在尝试制作侧边栏。不确定为什么它不起作用。创建网站并且无法正常工作。我是一个自学成才的人，我做得更好，但是该侧边栏不起作用。我很累，做所有事情以纠正它，但它没有起作用。
<div id="sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3s/jquery.min.js"></script>
<script>
$(document).ready(function()
$('#sidebar-btn').click(function(){
$('#sidebar').addClass('visible');
});
</script>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3s/jquery.min.js"></script>
<script>
$(document).ready(function()
$('#sidebar-btn').click(function(){
$('#sidebar').addClass('visible');
});
</script>
body{
margin:0px
padding:0px;
font-family: "Helvetic Neue";
}
#sidebar{
background:#151718;
width:200px;
height:100%;
display:block;
position:absolute;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#1C1E1F;
color:#ccc;
border-bottom: 1px solid #111;
display: block;
width:180px;
padding: 10px;
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:#111;
margin-bottom:5px;
display: block;
}
#sidebar-nth-child(2){
width: 75%
}
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3s/jquery.min.js"></script>
<script>
$(document).ready(function()
$('#sidebar-btn').click(function(){
$('#sidebar').addClass('visible');
});
</script>
</div>
</div>
</body>
</html>
您错过了开口{，$(document).ready(function()之后关闭});
这也只会显示侧边栏。如果您希望侧栏打开/关闭，请将$("#sidebar").addClass("visible");更改为$("#sidebar").toggleClass("visible");
$(document).ready(function() {
$("#sidebar-btn").on("click", function() {
$("#sidebar").addClass("visible");
/* use this if you want to open/close the sidebar */
/* $("#sidebar").toggleClass("visible"); */
});
});body {
margin: 0px padding:0px;
font-family: "Helvetic Neue";
}
#sidebar {
background: #151718;
width: 200px;
height: 100%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
ul li a {
background: #1C1E1F;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 180px;
padding: 10px;
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: #111;
margin-bottom: 5px;
display: block;
}
#sidebar-nth-child(2) {
width: 75%
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>您没有关闭文档准备就绪声明，并且您也缺少卷发式 - 请参见下面的
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').addClass('visible');
});
})
body{
margin:0px
padding:0px;
font-family: "Helvetic Neue";
}
#sidebar{
background:#151718;
width:200px;
height:100%;
display:block;
position:absolute;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#1C1E1F;
color:#ccc;
border-bottom: 1px solid #111;
display: block;
width:180px;
padding: 10px;
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:#111;
margin-bottom:5px;
display: block;
}
#sidebar-nth-child(2){
width: 75%
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3s/jquery.min.js"></script>
<script>
$(document).ready(function()
$('#sidebar-btn').click(function(){
$('#sidebar').addClass('visible');
});
</script> body{
margin:0px
padding:0px;
font-family: "Helvetic Neue";
}
#sidebar{
background:#151718;
width:200px;
height:100%;
display:block;
position:absolute;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#1C1E1F;
color:#ccc;
border-bottom: 1px solid #111;
display: block;
width:180px;
padding: 10px;
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:#111;
margin-bottom:5px;
display: block;
}
#sidebar-nth-child(2){
width: 75%
} <html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3s/jquery.min.js"></script>
<script>
$(document).ready(function()
$('#sidebar-btn').click(function(){
$('#sidebar').addClass('visible');
});
</script>
</div>
</div>
</body>
</html>