单击锚点时使用jquery来添加类

Question

having trouble with this. Any help would be appreciated. I'm trying to add the "slide" class to the left-menu div by using the Id "lm" doesn't seem to be working for me.

 $(document).ready(function() {}); $("#toggle", ).click(function() { $("#lm").addClass("slide"); }); 

  .left-menu { height: 55%; width: 45%; position: absolute; top: 0; left: 0; padding: 0; list-style: none; border-right: 2px solid #fff; background-color: #000; z-index: 1000; } .slide { -webkit-transform: translate(-20, 0); -moz-transform: translate(-20em, 0); -o-transform: translate(-20em, 0); -ms-transform: translate(-20em, 0); transform: translate(-51em, 0); -webkit-transition: 10s; -moz-transition: 10s; -o-transition: 10s; transition: 10s; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class="container-fluid header"> <div class="text-vertical-center apple-effect"> <a id="toggle" href="#">[sv]</a> </div> </header> <div class="container-fluid"> <div class="left-menu" id="lm" role="navigation"> <a class="nav-link" href="#">Home</a> </div> 

Answer 1

Your syntax is wrong, put the click FUNCTION in the $(document).ready() , and also there is a comma(,) exist in your script at this line $("#toggle",).click() . Remove it.

Try this :

$(document).ready(function(){
    $("#toggle").click(function(){
       $("#lm").addClass("slide");
    });
});

Answer 2

Try this .Your jquery code has syntax error & Not with proper format Change as like this ,

Why ?

1. You should add the click function inside the $(document).ready(function() {//click function}) not with outside , And its not closing properly })
2. Also css slide class not closing properly }
3. $("#toggle,") its a invalid selector .so remove the , in $("#toggle,")

Note Don't forget to add jquery library link

Working Example

 $(document).ready(function() { $("#toggle").click(function() { $("#lm").addClass("slide"); }); }) 

 .left-menu { height: 55%; width: 45%; position: absolute; top: 100px; left: 0; padding: 0; list-style: none; border-right: 2px solid #fff; background-color: #000; z-index: 1000; } .slide { -webkit-transform: translate(-20, 0); -moz-transform: translate(-20em, 0); -o-transform: translate(-20em, 0); -ms-transform: translate(-20em, 0); transform: translate(-51em, 0); -webkit-transition: 10s; -moz-transition: 10s; -o-transition: 10s; transition: 10s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class="container-fluid header"> <div class="text-vertical-center apple-effect"> <a id="toggle" href="#">[sv]sxx</a> </div> </header> <div class="container-fluid"> <div class="left-menu" id="lm" role="navigation"> <a class="nav-link" href="#">Home</a> </div> 

Answer 3

Just remove that comma and check the below code.

 $(document).ready(function() { $("#toggle").click(function() { $("#lm").addClass("slide"); }); }) 

 .left-menu { height: 55%; width: 45%; position: absolute; top: 100px; left: 0; padding: 0; list-style: none; border-right: 2px solid #fff; background-color: #000; z-index: 1000; } .slide { -webkit-transform: translate(-20, 0); -moz-transform: translate(-20em, 0); -o-transform: translate(-20em, 0); -ms-transform: translate(-20em, 0); transform: translate(-51em, 0); -webkit-transition: 10s; -moz-transition: 10s; -o-transition: 10s; transition: 10s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class="container-fluid header"> <div class="text-vertical-center apple-effect"> <a id="toggle" href="#">[sv]sxx</a> </div> </header> <div class="container-fluid"> <div class="left-menu" id="lm" role="navigation"> <a class="nav-link" href="#">Home</a> </div> 

Answer 4

you can use pure javascript instead of jquery. please refer to below link

Menu slide with different animation

Answer 5

Add click event inside document.ready() function. And remove ',' after #toggle.

$(document).ready(function(){
$("#toggle").click(function(){
   $("#lm").addClass("slide");
});

});

Answer 6

This is because you are using jquery click function which is going to be deprecated soon, please use

$("#toggle").on('click', function(){
   $("#lm").addClass("slide");
});