mit jquery zu addclass, wenn ein Anker geklickt wird

Question

Probleme mit diesem. Jede Hilfe wäre willkommen. Ich versuche, die "Folie" -Klasse, um das linke Menü div mit der Id "lm" hinzufügen scheint nicht für mich arbeiten.

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

Ihre Syntax ist falsch, legen Sie die Klick-Funktion in den $(document).ready(), und es gibt auch ein Komma (,) gibt es in Ihrem Skript an dieser Linie $("#toggle",).click(). Entfernen Sie es.

Versuchen Sie folgendes:

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

Answer 2

Versuchen Sie, diese .Ihre jQuery-Code hat Syntaxfehler & Nicht mit der richtigen Format Wandel als wie diese,

Warum?

1. Sie sollten die Klick-Funktion innerhalb der $(document).ready(function() {//click function}) nicht außerhalb hinzufügen und seine Schließung nicht richtig })
2. css auch slide Klasse nicht richtig } Schließen
3. $("#toggle,") sein ein ungültiger Selektor .so entfernen Sie die , in $("#toggle,")

Hinweis Vergessen Sie nicht jQuery-Bibliothek Link

Arbeitsbeispiel

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

Sie verwenden können reine Javascript statt jquery hinzuzufügen. lesen Sie bitte folgenden Link

Menu slide with different animation

Answer 4

einfach, dass Komma entfernen und den folgenden Code überprüfen.

$(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 5

Click-Ereignis inside document.ready() Funktion. Und entfernen Sie "," nach # toggle.

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

});

Answer 6

Dies liegt daran, Sie jquery Klick-Funktion verwenden, die bald nicht mehr werden wird, bitte das Komma von $ („# Toggle“) verwenden

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