<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>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code><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></code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code> 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%
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> <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></code></pre>
</div>
</div>
最佳答案
您在 $(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>关于javascript - 侧边栏不工作不知道为什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44296383/