javascript - 补充工具栏无法正常工作，不确定为什么

<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>
关于javascript - 补充工具栏无法正常工作，不确定为什么，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44296383/