边栏不工作不确定原因

时间：2017-05-31 23:53:36

标签： javascript jquery html css 

<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>

2 个答案:

答案 0 :(得分：2)

您在{

之后错过了开场});并关闭$(document).ready(function()

这也只会显示侧边栏。如果您希望边栏打开/关闭，请将$("#sidebar").addClass("visible");更改为$("#sidebar").toggleClass("visible");

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("#sidebar-btn").on("click", function() {
    $("#sidebar").addClass("visible");
    /* use this if you want to open/close the sidebar */
    /* $("#sidebar").toggleClass("visible"); */ 
  });
});
＆＃13; 
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%
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您没有关闭文档就绪声明，并且您也缺少大括号 - 请参阅下面的

＆＃13;
＆＃13; 
            
        $(document).ready(function(){
            $('#sidebar-btn').click(function(){
                $('#sidebar').addClass('visible');
            });
          })
＆＃13; 
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%
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
<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>
＆＃13; 
    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%
    }
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题