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

Question

遇到麻烦了。 任何帮助，将不胜感激。 我正在尝试通过使用ID“ lm”将“ slide”类添加到左侧菜单div中，这似乎对我不起作用。

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

您的语法错误，请将单击FUNCTION放到$(document).ready() ，并且脚本中的$("#toggle",).click()行中还存在一个逗号。 去掉它。

尝试这个 ：

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

Answer 2

试试这个。您的jquery代码语法错误，格式不正确，请按如下所示进行更改，

为什么呢

1. 您应该在$(document).ready(function() {//click function})内添加click函数，但不能与outside一起使用，并且不能正确关闭})
2. 另外CSS slide类无法正常关闭}
3. $("#toggle,")它是一个无效的选择。所以去掉,在$("#toggle,")

注意不要忘记添加jQuery库链接

工作实例

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

只需删除该逗号并检查以下代码即可。

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

您可以使用纯JavaScript而不是jquery。 请参考以下链接

带有不同动画的菜单幻灯片

Answer 5

在document.ready（）函数内添加click事件。 并在#toggle之后删除'，'。

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

}）;

Answer 6

这是因为您正在使用即将被弃用的jquery click函数，请使用

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